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

Updating dataSource data using rxjs

3 Answers 66 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Victor
Top achievements
Rank 1
Victor asked on 16 Jun 2015, 05:32 PM

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.

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 18 Jun 2015, 01:09 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Victor
Top achievements
Rank 1
answered on 18 Jun 2015, 03:01 PM

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) {
        ...
      }
    }
  }
};

0
Kiril Nikolov
Telerik team
answered on 22 Jun 2015, 07:41 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Victor
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Victor
Top achievements
Rank 1
Share this question
or