Updating dataSource data using rxjs

[Victor]

I am using rxjs to stream data from my server to the front-end in subsets. For example, I have a data set of 10,000 rows and the server will send them in response to the request in chunks of 500, making a total of 20 responses. I'm having some trouble updating the grid's dataSource's data set with each new response from the server. This is what I have so far:

grid.dataSource.transport.read = function (options) {
    var dataStream = dataRetriever.stream('handler', params, {}).publish();
    var first = true;
          // each response executes this callback
    dataStream.subscribe(rx.Observer.create(function (data) {
        if (first) {
            first = false;
            options.success(data);
        } else {
            var dataSource = $scope.kg.dataSource;

            dataSource.data().push.apply(dataSource.data(), data);
        }
    }));

    dataStream.connect();
};

I tried to iterate over the response and call dataSource.add for each item but the page performance plummeted and blocked the UI. I can't seem to find any other way to add the new response to the existing dataSource, but I feel as though there must be something else that I can do. I doubt that I'm the first to have this issue yet my searching hes led to few results.

[Kiril Nikolov]

Hi,

You can change the whole dataSet using the dataSource.data() method, and not apply single items. It is explained here:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

I would also want to tell you that setting the transport read using grid.dataSource.transport.read is not supported and you should use function instead. Again it is described in the documentation.

Regards,
Kiril Nikolov
Telerik

 

 

[Victor]

Thank you for the response. Using dataSource.data() to set the items replaces the current data set, which is not the behavior that I want. Instead I want to add the new (500) records to the existing data set. I could maintain my own array, concatenate it with the new data on each response from the server, and make another call to dataSource.data() each time, but that would be inefficient and incur unnecessary overhead.

Also in my example above, grid is just the config object for the Kendo Grid and already has the transport object set, so it is similar to the declaration

grid = {
  dataSource: {
    transport: {
      read: function (options) {
        ...
      }
    }
  }
};

[Kiril Nikolov]

Hello,

You can use the pushUpdate, method to add items to the dataSource. It is explained here:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-pushUpdate

Regards,
Kiril Nikolov
Telerik