Grid Checkbox Select all performance

[ianc]

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

[Alexander Valchev]

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