CODEWITHSUNDEEP
kendo-uikendo-grid
Bala
Bala

Reputation: 1139

Better approach to set the data in kendo grid.

Loading kendo grid is very slow.

I have a grid with 500-1000 records and 40 different columns. The grid loads slowly. It takes few seconds(10-15) to load the grid. Let's say the datasource is observable and is specified like this.

kendoDataSource = new kendo.data.Datasource({
    data: observableArray
})

what is the best way to update the records and show them on the UI. Should I use?

observableArray.push.apply(observableArray, newData)
or
grid.kendoDataSource.data(observableArray)
or
define a newDataSource with newData and set it again
kendo.setDataSource(newDataSource)

Finally, how do I know whether the Grid is loaded completely? I have a busy indicator which spins up in the center of the grid and I want to hide the busy indicator after the grid is loaded. What I do currently is 

observableArray.push.apply(observableArray, newData)
//hide the busy indicator.

Since the grid is still loading in the background, after I hide the busy indicator, the grid is blank for a while or shows the previous data for a while. The user thinks that the grid is loaded with empty screen. Few seconds later, all the records appear in the screen.

Upvotes: 0

Views: 207

Answers (1)

KendoReact - Stefan Stefanov
KendoReact - Stefan Stefanov

Reputation: 211

The best approach is the data method if only the data is changed. This will replace the entire data at once causing only one re-render.

The indicator can be hidden in the dataBound event as this indicates that the Grid is rendered.

Upvotes: 1

Related Questions