Question

我有一个Kendo Grid，

function getGridDataSource() {
    var gridDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Action("ClientBrowserDetailData", "Report", new { flag = "grid" })',
                dataType: "json"
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
            , pageSize: 20                
        },
        group: [
          { field: "Name" },
        ],
        pageable: true,
        pageSize: 20,
        serverPaging: false,
        serverFiltering: false,
        sort: { field: "Date", dir: "desc" },
        schema: {
            data: "ClientBrowserDetail",

            parse: function (response) {
                console.log('_ts: ' + response._ts);
                SetReportGenerationDateTime(response._ts, '#timeStamp');
                return response;
            },
            model: {
                fields: {

                    Date: { type: "date" },
                    Name: { type: "string" },
                    Version: { type: "string" },
                    Count: { type: "number" },
                    UPN: { type: "string" },
                    DisplayName: { type: "string" }

                }
            }
        }
    });
    return gridDataSource;
}

function createKendoGrid(gridDataSource) {
    //bind grid
    $("#grid").kendoGrid({
        dataSource: gridDataSource,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5,
            pageSizes: ["All", 10, 25, 50, 100],
            messages: {
                itemsPerPage: "items per page",
                //  display: "{0}-{1} from {2} items",
                empty: "No data available",
                allPages: "All"
            }
        },

        type: "json",

        filterable: true,

        columnMenu: true,
        groupable: true, // drag and drop to group by a column
        resizable: true,// column resize
        sortable: {
            mode: "single",
            allowUnsort: false
        },
        columns: [
            {
                field: "Date",
                width: 200,
                title: "Date",
                format: "{0:MMM dd, yyyy}",
                filterable: {
                    ui: function (element) {
                        element.kendoDatePicker({
                            format: "MM-dd-yyyy"
                        });
                    }
                }
            },
            {
                field: "Name",
                width: 200,
                title: "Name",
                filterable: {
                    cell: {
                        showOperators: true
                    }
                }
            },
            {
                field: "Version",
                width: 200,
                title: "Version",
                filterable: {
                    cell: {
                        showOperators: true
                    }
                }
            },
            {
                field: "Count",
                width: 200,
                title: "Count",
                filterable: {
                    cell: {
                        showOperators: true
                    }
                }
            },
            {
                field: "UPN",
                width: 200,
                title: "UPN",
                filterable: {
                    cell: {
                        showOperators: true
                    }
                }
            },
            {
                field: "DisplayName",
                width: 200,
                title: "Display Name",
                filterable: {
                    cell: {
                        showOperators: true
                    }
                }
            }
        ]
    });
}

然后在代码中，

    var gridDataSource = getGridDataSource();
    createKendoGrid(gridDataSource);
    $("#grid").data("kendoGrid").dataSource.read();

报表控制器中的ClientBrowserDetailData（flag）返回一个json文件，类似于：

{
  "ClientBrowserDetail": [{
      "Date": "2016-09-25",
      "Version": "48",
      "Count": 1,
      "Name": "Firefox",
      "UPN": "qaaaa.com",
      "DisplayName": "tan,",
      "LastAccessTime": "2016-09-07T20:10:39.39Z"
    },
    ....
    {
      "Date": "2016-09-29",
      "Version": "11",
      "Count": 1,
      "Name": "IE",
      "UPN": "aaaaa.com",
      "DisplayName": "paulr,",
      "LastAccessTime": "2016-09-23T16:39:15.1Z"
    }],
  "ReportType": "ClientBrowserDetail",
  "PageCount": 1,
  "PageIndex": 0,
  "DocumentId": "3ce169d3-2535-42a5-8bb7-fa0404118ce0",
  "id": "be1f9e85-7fab-4e0d-a0eb-4d24c0ffaf12",
  "TenantId": "2331231232132131",
  "_rid": "mFkkAM0GKwAHKQAAAAAAAA==",
  "_self": "dbs/mFkkAA==/colls/mFkkAM0GKwA=/docs/mFkkAM0GKwAHKQAAAAAAAA==/",
  "_etag": "\"0100ad19-0000-0000-0000-57eee6d90000\"",
  "_attachments": "attachments/",
  "_ts": 1475274444
}

网格显示，但是，它只显示前20个项目，它显示0页面（应该有2页，因为json包含30个项目），而在右下方，它显示无数据可用。

现在，如果我点击页面大小下拉列表，更改页面大小，则会正确显示数据。

任何人都知道为什么？感谢。

Answer 1

在您的架构中，您需要定义一个总属性，以便kendo相应地管理您的页面/页面大小

schema: {              
     data: "ClientBrowserDetail",
     total: "YourTotalCountProperty"
},

并且您还需要在可分页配置中指定页面大小：

 pageable: {
       pageSize: 20,
       pageSizes: [20, 50, 100],
       refresh: true
 },

除非手动更改页面大小，为什么Kendo Grid不能正确显示数据？

1 个答案: