kendo ui 未应用网格列模板

Question

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

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

这一定是我忽略的非常简单的事情...

代码如下：

<!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 未应用网格列模板

kendo ui grid column template not being applied

telerik

kendo-grid