UI становится не отвечающим за сетку кендо

Question

Я постоянно сталкиваюсь с проблемой сетки кендо для следующего сценария.

У меня есть сетка кендо с 18 колоннами. Пользователь может выбрать несколько строк. Количество строк в основном больше 10000.

Чтобы получить выбранные строки, я использую grid.select(). Чтобы извлечь содержимое из строки, я использую grid.dataItem(row).

Ниже приведен фрагмент кода.

  var listofselectedrows = grid.select(); 
      listofselectedrows.each(function (index, row) { 
      var currentDataRow = grid.dataItem(row); 
      }); 

Всякий раз, когда количество выбранных строк больше. Пользовательский интерфейс становится невосприимчивым. Я отлаживал код. grid.dataItem(row) предпринимает много усилий, что делает веб-страницу безответной.

Пожалуйста, помогите мне решить эту проблему.

Привет

Answer 1

Если я смотрю на их источник, dataItem функции с использованием регулярных выражений /k-grouping-row|k-detail-row|k-group-footer/ зацикливание throung все строки элемента, чтобы получить индекс строки. Я считаю, что использование источника данных getByUid будет быстрее, чем использование функции dataItem.

Измените код, чтобы быть как этот

$.each(listofselectedrows, function (index, row) { 
    var uid = $(row).data("uid"); 
    var currentData = grid.dataSource.getByUid(uid); 
}); 

Answer 2

Производительность Tunning

Когда связывание с большими наборами данных или при использовании больших размеров страниц, уменьшая активность в памяти объектов DOM, имеет важное значение для повышения производительности. Kendo Grid обеспечивает встроенную виртуализацию пользовательского интерфейса для высоко оптимизированной привязки к большим наборам данных. Включение виртуализации пользовательского интерфейса выполняется с помощью простой настройки.

$(document).ready(function(){ 
     $("#grid").kendoGrid({ 
     scrollable: { 
      virtual: true 
     } 
     }); 
    }); 

Answer 3

Использование подкачки:

$("#grid").kendoGrid({ 
    dataSource: { 
     type: "odata", 
     transport: { 
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders" 
     },  
     pageSize: 10, 
     serverPaging: true   
    }, 
    height: 250,  
    pageable: true, 
    selectable: "row multiple", 
    columns: [ 
     "OrderID", 
     "Freight",   
     "ShipName",        
     "ShipCity"   
    ], 
});