Kendo-angular: Kendo Grid Performance in IE11

[tregarick]

We are currently using both the Kendo UI grid and Kendo Angular 2 grids in our application. We have noticed that both grids have terrible rendering performance to the point our users are complaining and it is a serious issue for us. Some of our grids are showing several hundred rows with 20+ columns and custom templates but most are not. Chrome is fast and smooth regardless. I believe this is probably due to shimmed features being used in IE 11 which obviously will run slower than native implementations in Chrome. However this aside grid performance in IE11 needs improving urgently. To replicate simply go to the Kendo demo pages in IE11 and scroll rapidly and the difference is obvious in even these simple grids when compared to Chrome real world implementations are only going to be worse. Is there anything in progress to resolve this issue?

[EricSch]

@tregarick I'm allowing me to say, this is probably more an Angular rendering problem. Goggles focus is on the Chrome browser, but they doing also fixes for others browsers.

[tregarick]

As mentioned EricSch this rendering performance issue is also visible in the Kendo UI Grid which has nothing to do with Angular.

[KirilNN]

Is the problem you are having related to the Angular2 or the jQuery Grid? Note that these are two different codebases that do not share common functionality.

[tregarick]

Basically both. Our app uses both Grids as we are migrating the code to Angular 2 from an AngularJS app so unfortunately we have a bit of a mishmash going on at the moment. It's a financial software app so the grids are heavily used and we have noticed that in IE11 both flavors are very jumpy and laggy when rendering even smallish amounts of data say results in the 10s to low 100s. If you look at the Kendo Angular 2 Grid demo in IE11 and scroll quickly its visible when compared to Chrome and this gets much worse with real world usage. Chrome we have no problems at all smooth scrolling and resizing. I suspect that Chrome is able to utilize more native API calls where as IE is using shimmed features but my point is that the grids need to get better in IE11.

[EricSch]

@tregarick I'm not talking about the jQuery grid. It's obvious, that the grid renders amount of elements -> rendering / performance issues.
I'm talking about Angular2 (or officially Angular). The codebase for the Kendo Grid for Angular 2 is the same, in Chrome and IE, using Angular syntax. How the elements are compiled, emitted and wired, is Angular choice. There aren't many options to influence that, unless you go back to DOM manipulations, what u shouldn't.

But I agree with you, it is slower in IE11 or even Edge. But be happy :) In earlier versions of Angular, it even didn't work in IE or Edge, and there are still problems.

[tregarick]

EricSch unfortunately I can only be happy when my users are happy, kinda how my job works. Kendo maintain their grids are performant across browser editions including IE11 and Edge and for the most part I would agree with them their controls are excellent. However i'm using the issue tracker to raise that I believe there is a problem that at least needs looking into with regards to their grids performance in IE. I am fully aware that the code base for their controls is the same in different browsers that's kinda obvious which is why I said that the issue may be down to the fact Chrome has a performance advantage over IE due to better ES2015 coverage and perhaps Kendo or Angular have to use shimmed functionality in IE which is slower in which case I would agree it may be out of Kendos control.
Still worth raising in my opinion.

[tsvetomir]

We recently turned on production mode for the samples on the site. The performance of the Basic Usage demo seems pretty good in IE11 as a result.

We'll appreciate if you can share a specific scenario that we can profile for performance problems.

[tregarick]

Hi tsvetomir many thanks for the reply. I took a look at your website again and IE11 is still slow IMHO. Open up IE11 and Chrome side by side and go to http://www.telerik.com/kendo-angular-ui/components/grid/

Once the grid at the top loads if you drag the grids scroll bar up and down continuously (Even relatively slowly) there is obvious jitter in IE where as Chrome is butter smooth. This is symptomatic of a significant performance difference between the two browsers and this is on a basic usage grid. The grids in our app are more complicated and hosted in re-sizeable Kendo UI windows and the rendering is hugely laggy to the point it's really impacting usability - Chrome again though is silky smooth. I'll try using production mode and see if that makes a difference for us just to make sure otherwise I will profile our site in IE and see if I can see where the lag is coming from specifically.

[tregarick]

Basically this is a known issue at Kendo that not even virtual scrolling can solve as it's too buggy. We have switched to AG Grid as the Kendo grid cannot handle large data sets in complex grids in IE11. The reason I know they are aware of this is that on their live website demos if you look at the JS they deliberately throttle the amount of data they load into the grid if the user is browsing in IE11!

[tsvetomir]

My tests (100k rows, 5 columns) indicate similar performance. Again, if you have a particular test case we'll be happy to profile it.

There is no difference in the row count in the examples, it's 100k rows everywhere. We used to have such distinction in Kendo UI for jQuery mainly due to IE9 performance issues.

[tregarick]

Thanks for reply tsvetomir. Yeah sorry we are using JQuery and Angular 2 grids the throttling relates to JQuery but still a bit sneaky IMHO! Without virtual scrolling performance is most definitely not similar. With it turned on very small difference but still noticeable between IE and Chrome add more than 5 simple simple columns - we use over 20 and watch it deteriorate. When you throw grouping into the mix virtual scrolling is buggy and unusable which is a show stopper for us. We have switched over to AG Grid now and found it meets our needs and virtual scrolling works well with grouping and is a better experience in IE 11 than the Kendo grid. Appreciate our use case is at the extreme end and Kendo performance is probably acceptable in most uses but there is definitely room for improvement.