Append Array to DataSource

4 posts, 0 answers
  1. Douglas
    Douglas avatar
    9 posts
    Member since:
    Jul 2013

    Posted 12 Sep 2015 Link to this post

    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:, 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.

  2. Plamen Lazarov
    Plamen Lazarov avatar
    135 posts

    Posted 16 Sep 2015 Link to this post

    Hello Douglas,

    I am afraid the DataSource is not designed for adding arrays of items. The standard approach is to use 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
    - 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.

    Plamen Lazarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Douglas
    Douglas avatar
    9 posts
    Member since:
    Jul 2013

    Posted 21 Sep 2015 in reply to Plamen Lazarov Link to this post, data); is faster than your suggestion.  I will stick with this for now.
  4. Douglas
    Douglas avatar
    9 posts
    Member since:
    Jul 2013

    Posted 21 Sep 2015 in reply to Douglas Link to this post

    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 =;
      var item = grid.dataItem(row);
      if ( > ( * grid.pager.pageSize())) {
        $.merge(, data);
        if (( / grid.pager.pageSize()) > grid.pager.totalPages());
      else {, data);
      if (item != null) {

Back to Top