Hi,
I am using Kendo Grid in Angular 4, The Grid has the functionality of Grouping as well Inline Editing in reactive forms.Could you please confirm if angular Reactive forms in faster in performance compared to Template Driven forms.Also I have searched through the existing threads on this Kendo Grid Performance issue. I have built the project in prod mode using "ng build --prod" and also used the Virtual scrolling, " [scrollable]="'virtual'"", However the performance of the grid is still slow, Is it related to the number of columns in the Grid ?(My application has 10 columns for grid).
Could you please suggest what all other factors impact the Kendo Grid , And how can I optimize without compromising on the User Experience.
Regards
K Govardhan.
5 Answers, 1 is accepted
Reactive forms are indeed the established standard way to go. The top reasons they are preferred by most developers are not because they are more performant, because performance largely depends on the specific scenario, but rather the flexibility, data immutability, testability, and keeping business logic in the component's class code rather than in the template tip the scales. You can find multiple discussions on the topic online, but the following Stackoverlow thread and blog post seems to sum up the benefits of reactive forms really well:
https://stackoverflow.com/questions/39142616/what-are-the-practical-differences-between-template-driven-and-reactive-forms
https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Having 10 columns in the Grid is perfectly acceptable and should not affect performance. The approach that will improve the Grid performance when virtual scrolling is used is to reduce the page size (especially for IE users - Grids with ~30-50 items per page seems to perform good enough in most scenarios).
You can also check out the following documentation article on Grid performance (if you had not already done so):
https://www.telerik.com/kendo-angular-ui/components/grid/browser-performance/
Another thing that can cause performance issues is using multiple templates in Grid cells, especially if there are values, bound to a function that performs some heavy calculations. Each time the Angular change detection is triggered, all templates will be reevaluated and all functions (if such are present) will be executed.
If the data is retrieved via remote server calls you can also consider debouncing the Grid pageChange event as demonstrated in the following section of our documentation to avoid multiple HTTP requests when the user scrolls rapidly through the Grid items:
https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-debouncing-pagechange-events
Here is an example of a Grid with grouping and virtual scrolling with 10 columns and page size set to 50:
https://plnkr.co/edit/115gchabZStNnIA6GTnG?p=preview
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Rank 1
Hi Dimiter,
I have looked at the link you have supplied https://www.telerik.com/kendo-angular-ui/components/grid/browser-performance/
I can get the grid performance to be pretty good using virtual scrolling and the technique you have described in re-using data items.
However in our use case we also require grouping which is where the above link does not help. The GroupResult type structure is quite different to the GridResult type. I also can't imagine how the rendering will work with rebinding existing rows as the grouping rows + columns may be inconsistent with the next items to bind.
In our scenario we just have one level of grouping by relative date (Today, Yesterday, 7 Days Ago etc...) and we actually hide the left grouping column so the group looks basically like a header for each set of rows. The users like this scenario because of the way sorting works with the grouping of relative days.
Do you have any ideas how I can re-use data items and avoid the re-render performance hit in my use case because as it stands the grid virtual scrolling is very sluggish (correct pagesize for our screen size). I've even tried paging and that is also sluggish.
Thanks,
Rob.
Could you make sure, that the latest Grid version is used by the project:
https://www.telerik.com/kendo-angular-ui/components/grid/changelog/
Now the grid has a built in browser-performance optimization for reusing its data items.
In case further assistance is required for this case, we will need a sample project or stack blitz example demonstrating the issue, so that we can check it in details and provide further feedback. Thank you in advance.
Regards,
Svetlin
Progress Telerik
Rank 1
Hi Svetlin,
Thanks I did not realise that this feature has now been baked in. I will upgrade and try it out. Hopefully this works well with grouping. If I find an issue I'll be sure to build an example of what I am trying to do.
Regards,
Rob.
I hope that helps.
Will be awaiting for an example in case further assistance is required for this case.
Regards,
Svetlin
Progress Telerik