为啥除非手动更改页面大小，否则 Kendo Grid 无法正确显示数据？

Posted 2023-05-07

【中文标题】为啥除非手动更改页面大小，否则 Kendo Grid 无法正确显示数据？

【英文标题】：Why Kendo Grid does not show the data correctly unless change page size manually?为什么除非手动更改页面大小，否则 Kendo Grid 无法正确显示数据？

【发布时间】：2017-02-11 22:55:42

【问题描述】：

我有一个剑道网格，

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 个项目），并且在右下角，它显示没有可用的数据。

现在，如果我点击页面大小下拉菜单，更改页面大小，那么它会正确显示数据。

有人知道为什么吗？谢谢。

【参考方案1】：

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

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

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

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