Append Array to DataSource

[Douglas]

I've searched around but I can't find a supported method of adding an array to the end of a DataSource that already contains data.

 I have found that this works nicely:  dataSource.data().push.apply(dataSource.data(), data);

The problem is that it starts to get really slow (in some cases I can have up to about 150,000 records.

I've seen this:  $.merge(dataSource._pristineData, data);

But this method doesn't seem to let the DataSource know that new items have been added to the array.  It's my understanding that jQuery fiddles around with some internal data of the appended to array.  Is there a way to let the DataSource object know that it's array has been changed?

I'm only looking for the most performant way to add data to a Grid.

[Plamen Lazarov]

Hello Douglas,

I am afraid the DataSource is not designed for adding arrays of items. The standard approach is to use dataSource.data().push() or dataSource.add(), but both methods append items one at a time.

What I can suggest is the following:

- retrieve the current data item collection with dataSource.data()
- transform the obtained ObservableArray to a plain array via the toJSON method
- create a new array that holds the olds items and the new items
- set it to the dataSource via its data() method.

In this way you will add all items with a single call.

Regards,
Plamen Lazarov
Telerik

 

 

[Douglas]

dataSource.data().push.apply(dataSource.data(), data); is faster than your suggestion.  I will stick with this for now.

[Douglas]

This code seems to work pretty fast.  It's allow faster than allowing the dataSource to refresh the grid after every batch of data.  It still slows down around 50,000 records but it's better than directly updating the dataSource.

 

ProcessIncomingItems: function(data) {
  var dataSource = ItemsViewModel.get('Items');

  var grid = $('#ItemsGrid').data('kendoGrid');

  var row = grid.select();

  var item = grid.dataItem(row);

  if (dataSource.data().length > (grid.pager.page() * grid.pager.pageSize())) {
    $.merge(dataSource.data(), data);

    if ((dataSource.data().length / grid.pager.pageSize()) > grid.pager.totalPages()) grid.pager.page(grid.pager.page());
  }
  else {
    dataSource.data().push.apply(dataSource.data(), data);
  }

  if (item != null) {
    grid.selectDataItem(item);
  }
}