即使頁面大小已定義，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; } 
}