安装或设置
我们可以在 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") %>