Question

我有一个Kendo网格，可以显示启用了分页功能的数据。

单击页码按钮可以使用数据更改页面，但是在单击导航按钮（下一个，上一个，第一个，最后一个）时，网格将变为空，没有可用的记录消息。

下面的代码段是我的网格代码：

function BindTranscript(ObjectData) {
            $("#grid").kendoGrid({
                noRecords: true,
                dataSource: {
                    data: ObjectData,
                    pageSize: 20,
                    schema: {
                        model: {
                            fields: {
                                Heading: { type: "string", editable: false, nullable: true },
                                date: { type: "string", editable: false, nullable: true },
                                person: { type: "string", editable: false, nullable: true },
                                Visitor: { type: "string", editable: false, nullable: true },
                                Category: { type: "string", editable: false, nullable: true },
                                details: { type: "string", editable: false, nullable: true }
                            }
                        }
                    },
                },
                // height: 550,
                // groupable: true,
                sortable: true,
                pageable: true,
                dataBound: resizeGrid,
                scrollable: true,
                sortable: true,
                columns: [{
                    template: "<div class='icon'>" +
                    "<span class='k-icon k-i-data'></span></div> #: heading #",
                    field: "heading",
                    title: "heading",
                    width: 240
                }, {
                    field: "date",
                    title: "Date"
                },
                {
                    field: "person",
                    title: "person"
                },
                {
                    field: "Visitor",
                    title: "Visitor"
                },
                {
                    template: "<div class='category other'>" +
                    "<div class='cat-name'>#: Category #</div></div>",
                    field: "Category",
                    title: "Category"
                },
                {
                    field: "details",
                    title: "details"
                }],
            });
        }

Object

Data Grid With Page Numbers

resizeGrid函数的代码片段：

function resizeGrid() {
            var gridElement = $("#datagrid"),
                dataArea = gridElement.find(".k-grid-content"),
                gridHeight = gridElement.innerHeight(),
                otherElements = gridElement.children().not(".k-grid-content"),
                otherElementsHeight = 0;
            otherElements.each(function () {
                otherElementsHeight += $(this).outerHeight();
            });
            dataArea.height(gridHeight - otherElementsHeight);
        }

Answer 1

您已错误地定义了schema.model.fields和column fields（基于您附加到问题的单个对象示例）。

定义应该像：

$("#grid").kendoGrid({
            noRecords: true,
            dataSource: {
                data: ObjectData,
                pageSize: 10,
                schema: {
                    model: {
                        fields: {
                            //Heading: { type: "string", editable: false, nullable: true },
                            date: { type: "string", editable: false, nullable: true },
                            Agent: { type: "string", editable: false, nullable: true },
                            Visitor: { type: "string", editable: false, nullable: true },
                            Category: { type: "string", editable: false, nullable: true },
                            Notes: { type: "string", editable: false, nullable: true }
                        }
                    }
                },
            },
            // height: 550,
            // groupable: true,
            sortable: true,
            pageable: true,                
            scrollable: true,
            sortable: true,
            columns: [{
                field: "date",
                title: "Date"
            },
            {
                field: "Agent",
                title: "person"
            },
            {
                field: "Visitor",
                title: "Visitor"
            },
            {
                template: "<div class='category other'>" +
                "<div class='cat-name'>#: Category #</div></div>",
                field: "Category",
                title: "Category"
            },
            {
                field: "details",
                title: "details"
            }],
        });

注意：我删除了Heading，因为我不知道它属于哪个属性（如果有的话）。

还将一个小Dojo example撞到了一起。希望这会有所帮助。

Kendo Grid数据在导航按钮单击时消失

1 个答案: