安裝或設定
我們可以在 HTML5 / Javascript，ASP.NET MVC，JSP 和 PHP 專案/應用程式中新增 Kendo-UI 網格。
請按照以下步驟在 HTML5 頁面中新增 kendo-UI 網格
-
建立空的 html5 頁面。
-
包括 kendo.common.min.css 和 kendo.default.min.css 。在 head 標記中新增連結標記。
-
Kendo-UI 庫依賴於 Jquery。所以，在 jQuery 之後包括 kendo.all.min.js 和 kendo.aspnetmvc.min.js。
-
有兩種可能的方法來例項化 Kendo UI 網格。
- 來自空 div 元素。在這種情況下，所有網格設定都在初始化指令碼語句中提供。
- 從現有的 HTML 表格元素。在這種情況下，可以從表結構和元素 HTML 屬性推斷出一些網格設定。
在這兩種情況下，網格都被註冊為 jQuery 外掛。
你可以在此處找到上述檔案的 cdn 路徑。
示例：HTML5 頁面中的 Kendo-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 頁面中的 Kendo-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 檔案。有兩個選項可以包括這些檔案的本地副本，也可以使用 Kendo UI CDN 服務。
-
使用本地 JavaScript 和 CSS
導航到 Telerik UI for ASP.NET MVC 的安裝位置。預設情況下，它位於 C：\ Program
Files(x86)\ Telerik 中。從安裝位置複製 js 目錄並將其貼上到應用程式的 Scripts 資料夾中。
從安裝位置複製 styles 目錄並將其貼上到應用程式的 Content 資料夾中。
將 Scripts / js 目錄重新命名為 Scripts / kendo 。將內容/樣式重新命名為 Content / kendo 。
開啟 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 包移動到頁面的 head 標籤。預設情況下，它位於頁面的末尾。在 jQuery 之後渲染用於 ASP.NET MVC 指令碼包的 Telerik UI。
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
-
使用 CDN 服務
包括 kendo.common.min.css 和 kendo.default.min.css 。在佈局的 head 標記內新增連結標記。
在 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 可用於 location wrappers / aspnetmvc / Binaries / MVC *。
下一步是讓 ASP.NET MVC 知道伺服器端包裝器所在的 Kendo.Mvc.UI 名稱空間。為此，在 root web.config 和 View web.config 中新增
<add namespace="Kendo.Mvc.UI" />名稱空間標記。
- 要驗證你的設定，請在 view / aspx 頁面中新增以下 Kendo UI DatePicker 小部件。
剃刀
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>