kendo-grid开始使用kendo-grid


备注

Kendo UI网格是一个功能强大的小部件,允许您通过其表格表示来可视化和编辑数据。它提供了有关如何在底层数据上显示和执行操作的各种选项,例如分页,排序,过滤,分组,编辑等。要向网格提供数据,您可以通过Kendo提供本地或远程数据UI DataSource组件,用作中介。

演示

Dojo (您可以在线演示并与他人分享)

文献

安装或设置

我们可以在HTML5 / Javascript,ASP.NET MVC,JSP和PHP项目/应用程序中添加Kendo-UI网格。


请按照以下步骤在HTML5页面中添加kendo-UI网格。

  1. 创建空的html5页面。

  2. 包括kendo.common.min.csskendo.default.min.css 。在head标记中添加链接标记。

  3. Kendo-UI库依赖于Jquery。所以,在jQuery之后包括kendo.all.min.js和kendo.aspnetmvc.min.js。

  4. 有两种可能的方法来实例化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: "&nbsp;" }
                ],
                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网格。


  1. 创建ASP.NET MVC项目
  2. 包括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.csskendo.default.min.css 。在布局的head标记内添加链接标记。

    在jQuery之后包含kendo.all.min.jskendo.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" /> 命名空间标记。

  1. 要验证您的设置,请在view / aspx页面中添加以下Kendo UI DatePicker小部件。

剃刀

@(Html.Kendo().DatePicker().Name("datepicker"))
 

ASPX

<%: Html.Kendo().DatePicker().Name("datepicker") %>