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

Question

我是kendoUI的新手，我正在尝试用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

几个月前我写了一篇博客 post - Kendo UI Grid - Server Side Paging, Filtering and Sorting。这应该可以解决您的查询。 post 的主要重点是向 WebAPI 发送正确的参数。我已经展示了示例网格和数据源代码以及发送到 WebAPI 的请求和响应对象。如果您需要任何解释，请告诉我。

编辑：由于 link 不受欢迎，所以在此发布所有内容。

网格

下面是一个 Kendo 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
});

数据源

下面的数据源调用一个服务器方法，地址保存在 svcSampleUrl 中并在 "transport" 属性中分配给它。无需单独调用 ajax 来获取数据源的数据，

将 serverPaging、serverFiltering 和 serverSorting 设置为 true 可使 Kendo UI 网格数据源在用户触发以下任一事件时发送服务器调用；页面更改、过滤器更改和列排序更改。

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 应用于模型并 return 作为完整的请求对象编辑。

数据和总计

DataSource 模式包含两个属性； "data" 和 "total"。其中每一个都是我们期望结果的响应对象中的属性名称。我已将 "sampleDTOList" 分配给 "data" 属性，因为我的响应对象将包含该名称下的记录列表。同样，我已将 "totalItems" 分配给 "total" 属性。 "total" 属性接受所有记录计数的数值，而不管当前页面上有多少 returned。这样 DataSource 就知道实际有多少条记录以及要显示多少页。

注意：此处不探讨该模型，仅作为任何可用模型的占位符进行引用。

请求

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

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; }
}

服务器端

这是我们接收调用的地方，其中包含操作数据所需的所有参数。这是一个简单的方法，可以使用所有参数调用数据库存储过程以获取过滤结果。然后，存储过程应该 return 根据给定的页面大小、要跳过的记录数量、排序标准、过滤条件数组和我已由调用请求中包含的模型发送的任何其他过滤参数的数据集。页码虽然需要根据我们掌握的信息计算。

[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);
}

页码

由于我们从应用程序的客户端收到 "take" 和 "skip"，根据给定的信息计算所需的分页号码很容易。当我们知道页面大小和要跳过的记录数量时，我们可以通过应用以下规则来获取页码：

pageNo = (skip + take) / take

回应

Response对象包含前面提到的DataSource需要的两个属性；一种用于模式的 "data"，另一种用于模式的 "total" 属性。

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

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

Kendo Grid showing all records even when page size is defined

grid

kendo-ui

asp.net-web-api