Kendo 网格 noRecord 模板与页脚模板的意外行为

Question

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

它在页脚下方显示 "No record" 模板，而它应该显示在页眉和页脚之间。这是示例代码。

<!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。我是不是做错了什么或者这是 kendo API 相关的问题？

Answer 1

在详细信息网格中设置 scrollable: true 将导致 noRecords 模板呈现在列 footerTemplate

上方

Kendo 网格 noRecord 模板与页脚模板的意外行为

Kendo grid noRecord template unexpected behavior with footer template

kendo-ui

kendo-grid

kendo-asp.net-mvc