kendo-grid チュートリアル
剣道の使い方
サーチ…
備考
剣道のUIグリッドは強力なウィジェットで、テーブル表現を使ってデータを視覚化したり編集したりすることができます。ページング、並べ替え、フィルタリング、グループ化、編集などの基になるデータに対して操作を表示し、実行する方法に関するさまざまなオプションが用意されています。グリッドにデータを供給するために、ローカルデータまたはリモートデータのいずれかを剣道UI DataSourceコンポーネント。メディエータとして使用されます。
道場 （オンラインデモをして他の人と共有することもできます）
インストールまたはセットアップ
HTML5 / Javascript、ASP.NET MVC、JSP、PHPプロジェクト/アプリケーションにKendo-UIグリッドを追加できます。
以下の手順に従って、剣道UIグリッドをHTML5ページに追加してください。
空のhtml5ページを作成します。
kendo.common.min.cssとkendo.default.min.cssを含めます。 headタグ内にリンクタグを追加します。
剣道UIライブラリはJqueryに依存しています。したがって、jQueryの後にkendo.all.min.jsとkendo.aspnetmvc.min.jsを追加してください。
剣道UIグリッドをインスタンス化する方法は2つあります。
- 空のdiv要素から。この場合、すべてのグリッド設定は初期化スクリプト文で提供されます。
- 既存のHTMLテーブル要素から。この場合、グリッド設定の一部は、テーブル構造と要素HTML属性から推測できます。
どちらの場合も、グリッドはjQueryプラグインとして登録されます。
あなたは上記のファイルのためにここにcdnのパスを見つけることができます。
例：HTML5ページの剣道UIグリッド - 空のdiv要素
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var products = [{
ProductID: 11,
ProductName: "Chai",
}, {
ProductID: 22,
ProductName: "Chang",
}, {
ProductID: 33,
ProductName: "Aniseed Syrup",
}, {
ProductID: 44,
ProductName: "Chef Anton's Cajun Seasoning",
}, {
ProductID: 55,
ProductName: "Chef Anton's Gumbo Mix",
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
}
},
}
},
pageSize: 10
},
sortable: true,
filterable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
例：HTML5ページの剣道UIグリッド - 既存のHTML表要素
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});
</script>
</div>
</body>
</html>
以下の手順に従って、ASP.NET MVCアプリケーションにkendo-UIグリッドを追加してください。
- ASP.NET MVCプロジェクトを作成する
- JavascriptファイルとCSSファイルをインクルードします。これらのファイルのローカルコピーを含めるか、剣道UI CDNサービスを使用するかの2つのオプションがあります。
ローカルのJavaScriptとCSSを使用する
Telerik UI for ASP.NET MVCのインストール場所に移動します。既定では、C：\ Program Files（x86）\ Telerikにあります。
jsディレクトリをインストール場所からコピーし、アプリケーションのScriptsフォルダに貼り付けます。
インストールディレクトリからstylesディレクトリをコピーして、アプリケーションのContentフォルダに貼り付けます。
スクリプト/剣道にスクリプト/ jsのディレクトリの名前を変更します。 コンテンツ/スタイルの名前をコンテンツ/剣道に変更します。
App_Start / BundleConfig.csを開き、ASP.NET MVCのTelerik UI用のスクリプトとスタイルバンドルを下に追加します。
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.default.min.css"));
bundles.IgnoreList.Clear(); //Tell the ASP.NET bundles to allow minified files in debug mode.
jQueryバンドルをページの先頭タグに移動します。デフォルトではページの最後にあります。 jQueryの後にTelerik UIをASP.NET MVCスクリプトバンドル用にレンダリングします。
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
CDNサービスを使用する
kendo.common.min.cssとkendo.default.min.cssを含めます。レイアウトの先頭タグ内にリンクタグを追加します。
jQueryの後にkendo.all.min.jsとkendo.aspnetmvc.min.jsを含めます。
Telerik MVC Schedulerラッパーを使用している場合は、 kendo.all.min.jsの後にkendo.timezones.min.jsを 追加してください 。
あなたは上記のファイルのためにここにcdnのパスを見つけることができます。
プロジェクトにKendo.Mvc.dllリファレンスを追加すると、DLLは場所ラッパー/ aspnetmvc / Binaries / MVC *で利用できます。
次のステップは、ASP.NET MVCに、サーバー側ラッパーがあるKendo.Mvc.UI名前空間を知らせることです。このためには、ルートweb.configおよび
<add namespace="Kendo.Mvc.UI" />名前空間タグを<add namespace="Kendo.Mvc.UI" />。
- 設定を確認するには、view / aspxページに剣道UI DatePickerウィジェットを追加してください。
かみそり
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>