Question

我在项目中实现了kendo网格。为了显示页脚值，我在网格中添加了页脚模板。我还没有添加记录模板，以便在数据不存在时向用户显示消息。它按预期工作，但是当为层次结构网格实现此功能时，它会显示奇怪的行为。

它显示页脚下方的“无记录”模板，而它应显示在页眉和页脚之间。这是示例代码。

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/hierarchy">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.117/styles/kendo.bootstrap.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.1.117/js/kendo.all.min.js"></script>


</head>
<body>

        <div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function() {
                    var element = $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                            },
                            pageSize: 6,
                            serverPaging: true,
                            serverSorting: true
                        },
                        height: 600,
                        sortable: true,
                        pageable: true,
                        detailInit: detailInit,
                        dataBound: function() {
                            this.expandRow(this.tbody.find("tr.k-master-row").first());
                        },
                        columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
                                width: "110px"
                            },
                            {
                                field: "LastName",
                                title: "Last Name",
                                width: "110px"
                            },
                            {
                                field: "Country",
                                width: "110px"
                            },
                            {
                                field: "City",
                                width: "110px"
                            },
                            {
                                field: "Title"
                            }
                        ]
                    });
                });

                function detailInit(e) {
                    $("<div/>").appendTo(e.detailCell).kendoGrid({
                        dataSource: {
                          //  data: [{
                            //  OrderID: 1,
                             // ShipCountry: 'First Country',
                            //  ShipName: 'Ship Name',
                            //  ShipAddress: 'SHip Address'
                            //}],
                          data: [],
                            pageSize: 10
                        },
                      noRecords: {
    template: "No data available on current page."
  },

                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                            { field: "OrderID", width: "110px", footerTemplate: 'This is footer.' },
                            { field: "ShipCountry", title:"Ship Country", width: "110px" },
                            { field: "ShipAddress", title:"Ship Address" },
                            { field: "ShipName", title: "Ship Name", width: "300px" }
                        ]
                    });
                }


            </script>
        </div>


</body>
</html>

下面的示例有静态页脚，而在我的应用程序中，我是绑定聚合函数。以下是实施的dojo。我做错了什么，或者这是与剑道API相关的问题？

Answer 1

在详情网格中设置scrollable: true会导致noRecords模板呈现在列footerTemplate上方

使用页脚模板的Kendo grid noRecord模板意外行为

1 个答案: