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

Performance issue with KendoGrid in IE11

3 Answers 70 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Iurii
Top achievements
Rank 1
Iurii asked on 30 Oct 2019, 01:36 PM

In IE11 Kendo Grid Render of average amount of data could take up to 10s or even more. This issue is a blocker for our project.

There is a demo with simple table with 500 rows and 24 columns, please see attachment kendo-grid-demo.zip

Please comment upon this ticket. It would be great to know when this ticket will be fixed.

Br, 

Iurii

3 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 01 Nov 2019, 10:39 AM

Hi Iurii,

You can use the Grid virtualization functionality to resolve the problem. Here is a demo - https://www.telerik.com/kendo-react-ui/components/grid/columns/column-virtualization/.

Regards,
Nikolay
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Iurii
Top achievements
Rank 1
answered on 05 Nov 2019, 01:46 PM
Hi Nikolay, 

We cannot use virtualization for two reason:
1. We have tried it on IE11 and it still performs slowly. 
2. We have an expandable rows which could be different high and it has not supported by virtualization functionality yet. Also, I have posted a ticket about virtualization some time ago - https://www.telerik.com/forums/grid-with-virtualscroll-doesn't-work-with-grouping-feature-properly.

0
Stefan
Telerik team
answered on 06 Nov 2019, 09:47 AM

Hello, Iurii,

What I can suggest in this case is the following:

1) Use the columnVirtualization, not the row virtualization:

https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/#toc-columnVirtualization

If there will be custom cells, add the colSpan prop to the td that is coming from the props(it is required for the column virtualization):

const CustomCell = (tdElement, cellProps) => {
    return <td colSpan={cellProps.colSpan}>{cellProps.dataItem.city}</td>;
};
2) Instead of using row virtualization, use paging with maximum of 60 - 100 items per page.

 

This combination will ensure that the Grid will load faster and will not cause issues with detail rows.

Also, when testing a React application for performance, please make sure to test the build version as React is times faster when built for production.

npm run build 

serve -s build

 

Regards,
Stefan
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
General Discussions
Asked by
Iurii
Top achievements
Rank 1
Answers by
Nikolay
Telerik team
Iurii
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or