Kendo Grid With Angular 4: Responding slow when using in with IE

[Pragnesh]

Hello Team

I am facing performance issue while using kendo grid in my application in IE browser and it is working fine in chrome.

Application look like hung for fraction of second in IE when we change the data source in kendo grid. I have taken around 50 records(static) and when I switch from tab1 to tab2 it took around 15-20 seconds to display the data. We tried with the example given in kendo/grid documentation as well but same result (i.e. IE (10 and above) is responding very slow while same is working fine with Chrome.

Could you please help us in resolving the same.

 

[Pragnesh]

please find sample application as attachment

[Dimiter Topalov]

Hello Pragnesh,

Thank you for the runnable example. The application setup seems correct, but I can recommend several improvements, some of which are Angular-specific, and some - Kendo UI - specific, that will improve the performance.

In general the IE browser is notoriously slower than Chrome, especially when it comes to complex rendering, DOM calculations, and styling scenarios, and there are certain browser-specific limitations beyond our control.

However you can improve the performance by enabling production mode to avoid all Angular overhead imposed by the change detection cycles and mechanism. To do so, remove the conditional statement around the 

enableProdMode();

... call in the main.ts file.

The rendering time is directly correlated to the number of DOM elements that have to be rendered, so reducing this by introducing paging or virtual scrolling to the Grids, and using a relatively small page size (e.g. - 10-15) will further significantly improve performance in IE:

http://www.telerik.com/kendo-angular-ui/components/grid/paging/

http://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-virtual-scrolling

The final improvement I can suggest is setting the TabStrip keepTabContent option to true, thus avoiding obtaining Grid items and rerendering all Grid rows every time the selected tab is changed. This way initial loading of the page will take longer, but tabbing between TabStrip tabs will be significantly quicker with even more items per page in the Grid. Here is a short video of how the page behaves on my end with 50 items per Grid:

https://www.screencast.com/t/rH1Yn7ru

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Pragnesh]

Thanks for quick turnaround, the solution provided here is helpful.

However, after applying this solution I find one minor issue in grid pagination, it takes 4 to 5 sec on paging in the single grid.

[Dimiter Topalov]

Hi Pragnesh,

Can you please send us the updated application so we can inspect the specific paging-related code, and try to provide a suggestion about improving the performance, if one is available? 4-5 seconds for sure seems longer than expected.

Meanwhile, here are several examples including both client- and server-side paging that you can compare to your implementation, and times are considerably faster even in IE:

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

http://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-reactive-forms/

Regards,
Dimiter Topalov
Progress Telerik

[Pragnesh]

Hi Dimiter,

As per our business requirement we are not able to load all the data in page load time because our different tab's grids are dynamic so keepTabContent option is not useful in our case.

And as per our business requirement we need default 50 records per page on paging scenario.

So as per your suggestion we can apply enableProdMode() and paging but it is not much effective (for IE).

Please find attached test application.

[Dimiter Topalov]

Hello Pragnesh,

Thank you for the provided example. Unfortunately in the discussed scenario, further reducing the rendered DOM elements (via reducing the page size, number of Grid columns or both to a point where the performance is acceptable - e.g. page size 10-15 with the provided column configuration, or 20-25 with half the columns) would be the only option to improve the performance in IE.

Other system-specific factors also can yield different performance experience on different machines, but the main speed gain would come from the number of DOM elements that have to rendered and calculated - the less rows and columns, the better the performance.

Regards,
Dimiter Topalov
Progress Telerik