This is a migrated thread and some comments may be shown as answers.

Grid Checkbox Select all performance

1 Answer 170 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ianc
Top achievements
Rank 1
ianc asked on 11 Jul 2014, 11:47 AM
I have 3 column grid with checkboxes. When I am trying all model values (true/false) by selecting checkbox in header it gives poor performance.
Is the implementation done bad way or it just behave this way normaly ?

My code available at http://jsbin.com/mades/3/edit

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 14 Jul 2014, 03:42 PM
Hello Ianc,

The poor performance is caused by the fact that Grid is refreshed (its data rows are redrawn) every time the data changes, e.g. every time you use the set method.
items[i].set('IsSelected', true);

This means that the Grid will be refreshed as many times as the total amount of records in the dataSource.

This is expected but can be workaround. All you need to do is to hook up to the dataBinding event and prevent it. Then to update the data, unbind the dataBinding event and manually refresh the Grid. In this way the widget will be refreshed only once:
var selectAllCb = function() {
  var items = self.get('mydata'),
      grid = $("#myList").data("kendoGrid");
  grid.bind("dataBinding", function(e){ //prevent rebinding
    e.preventDefault();
  });
  console.log(items.length);
  if (self.get('isSelectAll') === true){ //update the data
      for (var i = 0; i < items.length; i++) {
          items[i].set('IsSelected', true);
      }
  } else {
      for (var i = 0; i < items.length; i++) {
          items[i].set('IsSelected', false);
      }
  }
  grid.unbind("dataBinding"); //unbind the preventing logic
  grid.refresh(); //refresh the grid
};

An alternative solution is to use the "=" operator to set the IsSelected field. In this way the MVVM will not track the changes and will not notify the grid that it should rebind.
var selectAllCb = function() {
  var items = self.get('mydata'),
      grid = $("#myList").data("kendoGrid");
 
  console.log(items.length);
  if (self.get('isSelectAll') === true){
      for (var i = 0; i < items.length; i++) {
          items[i].IsSelected = true;
      }
  } else {
      for (var i = 0; i < items.length; i++) {
          items[i].IsSelected = false;
      }
  }
 
  grid.refresh();
};

Please choose the approach that is more convenient for you.

Regards,
Alexander Valchev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
ianc
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or