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

Kendo Grid with Angular 6 performance issue

4 Answers 485 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dinakar
Top achievements
Rank 1
Dinakar asked on 03 Jan 2019, 06:09 AM

Hi,

We are using the Kendo grid with Angular 6 in our project. We are using grid features like Inline editing, Lock, Sorting(server-side), Filtering(server-side), Paging(server-side), Keyboard Navigation etc.
Grid responds very slow when the number of columns is more. When we have 50 to 60 columns. Single Click navigation, Keyboard navigation, Row editing etc. are taking 3 to 4 seconds delay. 

I have tested after reducing the number of columns to10 to 15. then it works fine.

Could you please help us in resolving the same. 

4 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 04 Jan 2019, 07:58 AM
Hello Dinakar,

Indeed, there are system and browser-specific limitations to the performance and the number of elements that can be rendered seamlessly in an Angular application. The IE browser especially is notoriously lacking in performance when compared to Chrome and FireFox in general, and when rendering Angular applications in particular. Typically the main bottleneck is rendering a large number of DOM elements, and the Angular change detection mechanism. 

The general recommendations are to enable the production mode for the application and to limit the number of DOM elements in terms of reducing the page size, the number of columns, or both, as described in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/browser-performance/

Utilizing the Grid paging or virtual scrolling functionalities typically provides both performant and rich in functionality Grids with good UX. As more than 50 rows can be hardly visible simultaneously on most screens, choosing a similar page size seems reasonable and not restraining the end user from browsing through large data sets (they will just need to be separated in portions that can be loaded without causing performance issues).

Heavy usage of templates in the Grid cells can also cause performance issues, especially when a property is bound to a function call that performs some heavy computation.

Recently we introduced enhancements in the Grid rendering that significantly improved the performance, especially in IE, but there are still limits to the number of DOM elements that can be rendered preserving an acceptable performance.

When using virtual scrolling instead of regular paging, the recommended page size for most seamless scrolling experience, is ~3 times the visible number of items (so for example if the Grid height is such that it accommodates displaying 10-11 visible items, the recommended page size would be ~30-35).

The editor templates are created when the Grid is in editing mode only, so this should not have any impact on performance.

Virtualization of Grid columns is currently not supported, but it is among our future plans to introduce such functionality. If you have the time, please support this feature request in our Feedback portal to help us estimate the customer demand for such an enhancement, and prioritize accordingly when updating our roadmap:

https://feedback.telerik.com/kendo-angular-ui/1360857-horizontal-virtual-scrolling-for-grid-virtual-columns

Thank you in advance.
 
For suggestions for improving the performance of the Angular applications in general, I can recommend the following resources (among many others available online):

https://netbasal.com/optimizing-the-performance-of-your-angular-application-f222f1c16354

https://blog.mgechev.com/tags/performance/

https://www.youtube.com/watch?v=WP-d5CCuS60

https://www.youtube.com/watch?v=ybNj-id0kjY

https://blog.angular.io/3-tips-for-angular-runtime-performance-from-the-real-world-d467fbc8f66e

The Grid is treated as a regular child component, and all checks, related to its built-in functionality will be performed each time the change detection is triggered. As described in the generic Angular performance-related resources (especially the talks by Minko Gechev), this can be avoided if the Grid is moved to a sibling component so that all other components, triggering change detection on the page, and the Grid itself, are not interfering with one another, and for example pressing a button outside of the Grid does not trigger the change detection, related to the Grid.

A page size of 30-40 items should yield a reasonable performance as far as the Grid is concerned, even with 50 columns, but of course - the less, the better. Introducing virtualization of the Grid columns in a future version of the Grid package should resolve this issue altogether, but meanwhile both page size, and the number of columns will affect performance.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Sunil
Top achievements
Rank 1
answered on 03 Apr 2020, 02:55 PM

Hello ,

     

0
Sunil
Top achievements
Rank 1
answered on 03 Apr 2020, 03:00 PM

Hi ,

   I was looking for Server side pagination in Kendo Angular grid with filters . Could you please provide me any reference so that i can use and implement in our Project . Any working example would be really Appreciated if you can provide ASAP .Thanks

0
Dimiter Topalov
Telerik team
answered on 07 Apr 2020, 07:05 AM

Hello Sunil,

The following Grid online demos feature server-side data operations like paging, filtering, and sorting:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/#toc-indicating-ongoing-data-operations

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started // second example - remote data

To enable the filtering functionality, set filterable to true, and bind the Grid filter input to the current state object.

Here are the updated examples:

https://stackblitz.com/edit/angular-jaepws?file=app/app.component.ts

https://stackblitz.com/edit/angular-kcp5ve?file=app/app.component.ts

Further details for enabling the filtering functionality are available in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/

In the virtual scrolling example, use the dataStateChange event handler as opposed to pageChange to handle all data operations simultaneously in one place only.

Sample apps that feature server-side data operations are also available in the following .NET Core integration article:

https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
General Discussions
Asked by
Dinakar
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Sunil
Top achievements
Rank 1
Share this question
or