Может ли Kendo Grid читать большую партию предметов и выполнять локальный пейджинг? - PullRequest
Новая
       5

Может ли Kendo Grid читать большую партию предметов и выполнять локальный пейджинг?

0 голосов
/ 26 июня 2018

Мне сложно понять, как создать REST API для обслуживания Kendo UI Grid. Вариант № 1 - использовать REST API для пейджинга, Вариант № 2 - сразу прочитать весь набор результатов и заставить управление сеткой обрабатывать пейджинг.

Вот проблемы, с которыми я столкнулся в обоих случаях:

1) Я передаю параметры Page и PageSize через строку запроса. Служба получает их, запрашивает модель данных и возвращает только количество запрошенных записей (например, 50 элементов на стр. 4). Проблема заключается в том, что элементы управления подкачкой отображают размер страницы для количества элементов в сетке. То есть, если размер моей страницы равен 50, а в наборе результатов содержится 3000 записей, таблица отображает 50 с одной кнопкой «страница» на странице 1. Как заставить таблицу Kendo UI использовать общее значение количество записей? Как это сделать, не выполняя запрос дважды (один раз для итога, второй раз для применения значений Пропустить и Взять)?

2) У меня всего 3000 записей, поэтому читать весь набор данных не составляет особого труда, но каждый раз, когда я нажимаю кнопку «перелистывать страницу», я получаю счетчик, и снова запрашивается весь набор данных. , Можно ли как-то сказать, чтобы Kendo Grid высосал весь набор из 3000 записей, но локально, страницами, кусками, скажем, 50 элементов на странице.

1 Ответ

0 голосов
/ 27 июня 2018

Установите serverPaging на false, чтобы сервер не звонил каждый раз. Можно прочитать все 3000 данных за один раз, а затем просто использовать пейджинг на локальных данных. Вот демо. 

var data =  new kendo.data.DataSource({
  serverPaging: false,
  pageSize: 5, 
  data: [
  	{firstName: 'John', lastName: 'A', Age: '10', Country: 'USA'}, 
  	{firstName: 'Max', lastName: 'B', Age: '20', Country: 'UK'}, 
  	{firstName: 'Luke', lastName: 'C', Age: '77', Country: 'Russia'}, 
  	{firstName: 'Raj', lastName: 'D', Age: '55', Country: 'France'}, 
  	{firstName: 'Peter', lastName: 'E', Age: '5', Country: 'Ghana'}, 
  	{firstName: 'Stan', lastName: 'F', Age: '51', Country: 'USA'}, 
  	{firstName: 'Mike', lastName: 'G', Age: '21', Country: 'India'}, 
  	{firstName: 'Lily', lastName: 'H', Age: '30', Country: 'USA'}, 
	{firstName: 'Lal', lastName: 'B', Age: '20', Country: 'UK'}, 
	{firstName: 'Sam', lastName: 'G', Age: '21', Country: 'India'},
        {firstName: 'Sean', lastName: 'G', Age: '47', Country: 'Aus'},
  ]
});

$('#grid').kendoGrid({
	dataSource: data, 
  columns: [
    {
      field: "firstName",
      title: "firstName",
      width: "120px"
    }, {
      field: "lastName",
      title: "lastName",
      width: "120px"
    }, {
      field: "Age",
      title: "Age",
      width: "120px"
    }, {
      field: "Country",
      title: "Country",
      width: "120px"
    }
  ],
  pageable: true,
  dataBound: function () {
    this.expandRow(this.tbody.find("tr.k-master-row").first());
  }
});
<head>
<title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="grid"></div>
   </body>
...