Question

按照入门文档设置基本网格。我添加了一个列模板来加粗第一列，但它没有被应用。我在Dojo中尝试了代码并且它可以工作。三重检查了语法，gird与所有数据一起显示正常，但没有应用粗体。

检查chrome中的html显示没有应用于表数据的样式。

这一定非常简单，我忽略了......

这是代码：

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Client</title>
  
<!-- Common Kendo UI CSS for web widgets and widgets for data visualization. -->
    <link href="../css/kendo/kendo.common.min.css" rel="stylesheet" />
    <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. -->
    <%--<link href="../css/kendo/kendo.rtl.min.css" rel="stylesheet" type="text/css" />--%>
    <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->
    <link href="../css/kendo/kendo.default.min.css" rel="stylesheet" />
    <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. -->
    <link href="../css/kendo/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
    <!-- Kendo UI combined JavaScript -->
    <script src="../js/kendo/kendo.all.min.js"></script>  
  
  <script>

        var people = [
               { firstName: "John",
                   lastName: "Smith",
                   email: "john.smith@telerik.com"
               },
               { firstName: "Jane",
                   lastName: "Smith",
                   email: "jane.smith@telerik.com"
               },
               { firstName: "Josh",
                   lastName: "Davis",
                   email: "josh.davis@telerik.com"
               },
               { firstName: "Cindy",
                   lastName: "Jones",
                   email: "cindy.jones@telerik.com"
               }
         ];


        $("#client_grid").kendoGrid({
            autoBind: false,
            selectable: true,
            columns: [{
                field: "firstName",
                title: "First Name",
                template: "<strong>#: firstName # </strong>"
            },
            {
                field: "lastName",
                title: "Last Name",
            },
            {
                field: "email",
                title: "Email",
            }]
        });


        $("#client_grid").kendoGrid({
            dataSource: people
        });

                      
    </script>


</head>
<body>

<div id="client_grid" />


</body>
</html>

Answer 1

那么，根据您提供的代码，您将初始化网格两次：

一：

$("#client_grid").kendoGrid({
        autoBind: false,
        selectable: true,
        columns: [{
            field: "firstName",
            title: "First Name",
            template: "<strong>#: firstName # </strong>"
        },
        {
            field: "lastName",
            title: "Last Name",
        },
        {
            field: "email",
            title: "Email",
        }]
    });

二：

$("#client_grid").kendoGrid({
        dataSource: people
    });

第二个是吹掉第一个配置（包括模板）。

请改为：

$("#client_grid").kendoGrid({
        dataSource: people,
        autoBind: false,
        selectable: true,
        columns: [{
            field: "firstName",
            title: "First Name",
            template: "<strong>#: firstName # </strong>"
        },
        {
            field: "lastName",
            title: "Last Name",
        },
        {
            field: "email",
            title: "Email",
        }]
    });
// Because autobind is false, you have to trigger the fetch somehow...
$("#client_grid").getKendoGrid().dataSource.read();

演示：http://dojo.telerik.com/@Stephen/UPuga

未应用kendo ui网格列模板

1 个答案: