Update new records into kendo Grid programatically

[Bal]

Hi All,

We have developed one application using AngularJS to retrieve data using API and display it in the grid. It works fine but if data is large then it takes time so you want to show the first 1000 data first then fetch the next 1000 data in the background and update in the kendo grid.

If anyone has a sample please send it to me.

Waiting for a reply.

Thanks!

[Nikolay]

Hello Bal,

If the performance is very bad even when using paging or virtual scrolling, I suspect that you have not enabled server-side data operations, and all the data is downloaded to the client in bulk, which generates a slow Ajax request.

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/serverpaging

Is the data used by some other widget except the Grid? If not, then the performance is better when the dataSource is not assigned to the Grid probably because no data is loaded from the remote service (the Kendo UI DataSource does not request data automatically after it is initialized).

Also, if you are using templates, it makes a difference what these templates contain.

Below I am posting a good article sharing information on how to get the best Grid performance:

https://www.telerik.com/blogs/how-to-get-the-best-grid-performance

Regards,
Nikolay
Progress Telerik

[Bal]

Hi Nikolay,

We did some troubleshoot and find that while retrieving records from API it takes time. So it is possible to read only 1000 records then bind to grid and then next 1000. 

We tried below approach.

We have around 1 Million records. We fetch first 1000 records using API and then bind to grid. But issue with this approach is that when user perform filter from grid then it only applies to 1000 records but when we wanted to apply filter on all 1 Million and return those records and then bind those records to grid. 

Thanks!

 

[Nikolay]

Hi Bal,

For large datasets, it is recommended to enable the Grid Virtualization. This way initially the Grid will fetch only a certain amount of items and when the user scrolls down it will fetch another patch same amount of items.

• Official demo for Virtualization
• Virtualization documentation

Hope this helps.

Regards,

Nikolay

[Bal]

Hi Nikolay,

Thanks for your response. We are not able to use Virtualization because we fetch data from API and then process some data and then create JSON objects to Bind to the grid. Also, we have enabled filter in that case how it works.

Do you have any other suggestions for it. We are really stuck on this issue.

Waiting for your reply.

Thanks!

 

 

[Georgi Denchev]

Hi, Bal,

In this case, you can stick to regular paging and also enable the other server operations such as serverFiltering and serverSorting.

The reason you're able to filter only one page instead all of the million records, is because when serverPaging is enabled, the Grid fetches only the data for the current page. If you have serverFiltering set to false, the Grid will be able to work only with the present data.

When you enable serverFiltering, the Grid will leave the filtering to the server. This means that you can make a database query such as "SELECT * FROM mytable WHERE filter" and retrieve the correct set of data. Then you can return the filtered json back to the Grid.

Best Regards,

Georgi