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
... call in the main.ts
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:
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:
I hope this helps.