代码之家 › 专栏 › 技术社区 › Manprit Singh Sahota

Kendo grid noRecord模板页脚模板出现意外行为

kendo-asp.net-mvc kendo-grid kendo-ui

Manprit Singh Sahota · 技术社区 · 7 年前

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

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

<!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相关的问题?

1 回复 | 直到 7 年前

Richard 7 年前

背景 scrollable: true 在详图网格中,将导致 noRecords 要在列上方渲染的模板 footerTemplate