Kendo Grid, показывающая все записи, даже если задан размер страницы

Question

Я новичок в пользовательском интерфейсе kendo, я пытаюсь реализовать сетку Kendo с помощью Webapi, пейджинг не имеет никакого эффекта ниже, это код. 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" 
        } 
       ] 
      }); 
     }); 

То же самое с сервисом OData Telerik предоставившего работает хорошо.

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

Ниже DataSource посылает вызов метода сервера, адрес, на который сохраняется в svcSampleUrl и возложенные на него в собственности «транспорт». Нет необходимости делать ajax-вызов отдельно для извлечения данных для источника данных,

Настройка сервераПервая обработка, serverFiltering и serverSorting как истина позволяют сетевому источнику данных Kendo UI Grid посылать вызовы сервера при срабатывании любого из следующих событий пользователем; изменение страницы, изменение в фильтрах и изменение сортировки столбца.

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

Свойство map параметров позволяет нам отправить набор параметров по умолчанию вместе с нашими пользовательскими обратно на сервер. Параметры по умолчанию включают «взять», «пропустить», «сортировать» и «фильтр», которые соответствуют размеру страницы, количеству записей для пропусков, критериям сортировки и массиву критериев фильтрации соответственно. Поскольку для отправки других параметров может потребоваться также, значения параметров по умолчанию устанавливаются в модели с другими значениями. Kendo.stringify применяется к модели и возвращается как полный объект запроса.

данных и Общая схема

источник данных содержит два свойства; «данные» и «итого». Каждый из них - это имена атрибутов в объекте ответа, в которых мы ожидаем наших результатов. Я присвоил «sampleDTOList» свойство «data», так как мой объект ответа будет содержать список записей под этим именем. Аналогично, я присвоил «totalItems» «total». Свойство «total» принимает числовое значение количества всех записей, независимо от того, сколько из них возвращается на текущую страницу. Таким образом, 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; } 
} 

Конец сервера

Здесь мы получаем вызов со всеми параметрами, необходимыми для управления данными. Это простой метод, который может вызвать хранимую процедуру базы данных со всеми параметрами для отфильтрованных результатов. Хранимая процедура должна затем возвращать набор данных в соответствии с заданным размером страницы, количеством пропущенных записей, критериями сортировки, массивом критериев фильтрации и любым другим параметром фильтра, который был отправлен моделью, включенной в запрос вызова. Номер страницы, хотя требует расчета по имеющейся у нас информации.

[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 

Отклик

Объект Response содержит два атрибута, необходимые DataSource как упоминалось ранее; один для «данных» и один для «общего» свойства схемы.

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