即使页面大小已定义，Kendo网格也显示所有记录

Question

我是新来的剑道UI，我想用Webapi实现Kendo网格，下面的分页不会起任何作用的是代码。 的API

public IList<Customer> GetCustomers(int take, int skip) 
     { 
      this.Customers = FillData.Customers; 
      this.Orders = FillData.Orders; 
      return Customers.Skip(skip).Take(take).ToList(); 
     } 

和JavaScript

$(document).ready(function() { 
      var element = $("#grid").kendoGrid({ 
       dataSource: { 
        type: "json", 
        transport: { 
         read: "/api/GridData/GetCustomers", 
         dataType: "json" 
        }, 
        pageSize: 6, 
        serverPaging: 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" 
        } 
       ] 
      }); 
     }); 

与Telerik的提供了很好的作品的OData服务同样的事情。

Answer 1

那么我写了几个月前的博客文章 - Kendo UI Grid - Server Side Paging, Filtering and Sorting。这应该可以解决您的查询。这篇文章主要关注的是向WebAPI发送正确的参数。我已经展示了一个示例网格和数据源代码以及发送到WebAPI的请求和响应对象。让我知道你是否需要任何解释。

编辑：张贴在这里，因为只有链接不赞赏。

网格

下面是剑道UI网格声明，我们将实现服务器端操作。

$("#sampleGrid").kendoGrid({ 
    columns: [ 
     { field: "ID", title: "ID", width: 50 }, 
     { field: "Label", title: "Label", template: "<span class='k-link bold' title='${Description}'>${Label}</span>" }, 
     { field: "Description", title: "Description" } 
    ], 
    dataBound: function() { this.element.find('tbody tr:first').addClass('k-state-selected') }, 
    pageable: { 
     refresh: true, 
     pageSizes: [10, 15, 20, 25] 
    }, 
    resizable: true, 
    reorderable: true, 
    filterable: true, 
    groupable: true, 
    selectable: true, 
    sortable: true 
}); 

的数据源

的下面的DataSource发送一个呼叫到一个服务器的方法，地址，其被保存在svcSampleUrl并在“传输”属性分配给它。不需要单独做一个Ajax调用来获取数据源的数据，

将serverPaging，serverFiltering和serverSorting设置为true，可以使Kendo UI Grid DataSource在触发以下任何事件时发送服务器调用由用户提供;更改页面，更改过滤器以及更改列的排序。

var sampleDataSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: svcSampleUrl, 
      contentType: "application/json; charset=utf-8", 
      type: "POST", 
      dataType: "json" 
     }, 
     parameterMap: function (options) { 
      model.Take = options.take; 
      model.Skip = options.skip; 
      model.Sort = options.sort; 
      model.Filter = options.filter; 
      return kendo.stringify(model); 
     } 
    }, 
    schema: { 
     data: "sampleDTOList", 
     // another way to accept the response if some particular values need processing 
     //data: function (response) { 
     // //some implementation with the response values 
     // return response.WorklistDTOList; 
     //}, 
     total: "totalItems", 
     model: { 
      fields: { 
       ID: { type: "number" }, 
       Label: { type: "string" }, 
       Description: { type: "string" } 
      } 
     } 
    }, 
    serverPaging: true, 
    serverFiltering: true, 
    serverSorting: true, 
    pageSize: 10, 
}); 

参数映射属性允许我们发送一组默认参数以及我们自定义的参数返回到服务器。默认参数包括分别与页面大小，要跳过的记录数量，排序条件和过滤条件数组对应的“take”，“skip”，“sort”和“filter”。由于可能还需要发送其他参数，所以在具有其他值的模型中设置默认参数值。 Kendo.stringify应用于模型并作为完整的请求对象返回。

数据和总

的数据源模式包含两个属性; “数据”和“总数”。其中每个都是响应对象中我们期望得到结果的属性名称。我已将“sampleDTOList”分配给“data”属性，因为我的响应对象将包含该名称下的记录列表。同样，我已将“totalItems”分配给“total”属性。无论在当前页面上返回多少个，“total”属性都接受所有记录计数的数值。这样DataSource就知道实际上有多少条记录以及要显示多少页。

注意：该模型在此处未作探讨，仅作为任何可用模型的占位符参考。

Request对象包含了确切的属性作为数据源被设置为发送到服务器的默认和自定义参数的请求。

public class FilterDTO 
{ 
    public int Take { get; set; } 
    public int Skip { get; set; } 
    public List<SortCriteria> Sort { get; set; } 
    public List<FilterCriteria> Filter { get; set; } 

    public string ID { get; set; } 
} 

public class SortCriteria 
{ 
    public string field { get; set; } 
    public string dir { get; set; } 
} 

public class FilterCriteria 
{ 
    public string field { get; set; } 
    public string operator { get; set; } 
    public string value { get; set; } 
} 

服务端

这是我们收到的呼叫与处理数据所需的所有参数。这是一个简单的方法，可以使用过滤结果的所有参数调用数据库存储过程。然后，存储过程应根据给定的页面大小，要跳过的记录数量，排序条件，过滤条件数组以及包含在调用请求中的模型发送的任何其他过滤参数来返回数据集。页码虽然需要从我们的信息计算。

[HttpPost] 
[ActionName("GetItems")] 
public SampleResponse GetItems(FilterDTO filterDTO) 
{ 
    //Calling a different layer for the read operation based in the parameter values 
    return BusinessLayer.GetItems(filterDTO); 
} 

页码

由于我们收到“取”，并从应用程序的客户端“跳过”，计算所需的寻呼号码是从给出的信息很容易。

pageNo = (skip + take)/take 

的响应

响应对象包含由数据源所需要的两个属性：当我们知道的记录页面大小和数量跳过，我们可以通过应用以下规则获得页码正如之前所提;一个用于“数据”，另一个用于模式的“全部”属性。

public class SampleResponse : BaseResponse 
{ 
    private List<SampleItems> SampleDTOList; 
    public List<SampleItems> sampleDTOList 
    { 
     get { return SampleDTOList; } 
     set { SampleDTOList = value; } 
    } 
    public int totalItems { get; set; } 
}