Declined
Last Updated: 02 Dec 2024 07:42 by ADMIN
srinivasan
Created on: 02 Dec 2024 06:48
Category: Kendo UI for Angular
Type: Bug Report
0
grid pagination
in kendo-pager-pager library for grid, the dropdown value we has max value as 5 lac record. while clicking on the max value , the grid gets stuck and even though the event triggers and function completed , the page showing as not responding. even the click event for the page is not working
1 comment
ADMIN
Martin Bechev
Posted on: 02 Dec 2024 07:42

Hello Srinivasan,

In summary, the reported behavior is expected due to the number of records that the Grid should render at a time.

If I understand correctly, you are using Grid with paging enabled and it has a page size option of 500,000. Please correct me if I am wrong.

Indeed rendering 500,000 records in the Grid is like using no pager on any performance optimization technique to improve the performance. Depending on the configuration and complexity of the Grid such amount of data might affect the productivity of the Grid. For such cases, a pager with virtual scrolling could be used:

https://www.telerik.com/kendo-angular-ui/components/knowledge-base/grid-paging-with-virtual-scrolling

Important details around this implementation:

  • Such configuration generally relies on custom logic and is suitable when page sizes are larger such as 500,000.
  • Both configuration virtual scrolling and paging, are not supported by the Grid when used simultaneously.
  • The pager is custom which just loads another set of data to the virtualized Grid. The pageable property is not set and it should mean to be.
  • When virtual scrolling is used, page sizes of 10, 15, and 20, would be only possible if the height of the Grid is too small to show 3, 5, or 6 rows (pagesize must be at least 3 times the visible rows). In case the height of the Grid must be fixed and such dynamic change isn't possible, then I am afraid that the proposed solution would not be feasible in this case.

    In such a situation, having two separate Grid might be found more convenient. The first Grid can use only paging for 10, 15, 20, 50, 100, 200 rows. When 500 is selected toggle the visibility of the Grid that used paging and show the one that uses virtual scrolling with the help of the Angular ngIf directive. This approach would increase the HTML markup and can be found hard to maintain in the future as instead of having a single Grid in this case you will have two. However rendering 2000 rows per page is expected to affect the performance, especially in more complex Grid scenarios where cell templates are used.

    In case having a page size 500 and above is a must option, then toggling two Grids is the way to go. If you can limit the page size to 500, it's advisable to use only one Grid with paging enabled.

I hope this sheds some light on the case. Let me know in case of any follow-up questions.

Regards,
Martin Bechev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.