I am having performance issue on our webapp using Kendo UI for jQuery:
In average, 20 columns are shown, 100 are hidden (style="display:none").
The Kendo grid is using a lot of CPU when navigating, loading filters or editing data inside cells. The browser (Firefox) can freeze sometimes.
2018.1.117 version of Kendo is used, do you think we could gain performance by upgrading to the latest Kendo version ?
I would enjoy too if you have any other advices about Kendo perf, bad practices to avoid ...
Templates are used for some columns
server Paging is true for the grid
7 Answers, 1 is accepted
Thank you for sharing brief details for the current set-up.
Even though, the grid has the server paging enabled, the amount of columns would have a great negative impact on the performance of the application. Even though the columns are not visible, they are rendered. In other words, for every row, there are more than 120 elements rendered. If we set the grid aside, drawing the DOM is a slow operation and the render time of the elements is a responsibility of the browser.
In case not all of the columns are used, it would be better if you do not render them at all. For testing purposes, you can remove all of the invisible columns and leave the visible ones only and see if there is an improvement of the performance.
Let me know on the performance after removing the majority of the columns.
Indeed, our DOM is huge and takes some time to load. When we delete the hidden columns, it greatly increases the loading time.
We have also identified that the methods showColumn and hideColumn take a lof of time to execute.
We use that a lot and it seem to be the major performancie issue. Do you know if there is an alternative in our Kendo version or in a more recent version ?
I am glad to hear that there have been improvements in the performance of the application.
The Kendo UI methods - showColumn and hideColumn do not have equivalents. The main issue that is related to those methods is that they modify the DOM of the page. And all of the operations with the DOM are slow, in general.
What I can recommend to further improve the performance is to decrease the number of columns to minimal. As well as, you might opt for setting a smaller page size of the data source. This would lead to less HTML elements rendered and the operations with the DOM should be faster.
I hope you find those suggestions helpful.
In reply to this thread, because we have the same issue, I never understood why your render invisible columns. Is it to prevent a full rendering of the whole page? I prefer wait to render the page when I add or remove a columns, and get my app always fast, than having a slow app just in case I maybe will show or hide a column. We always can get the data in the dataItem object, there's no need to render everything I think.
Do you plan to change that behavior eventually?
In our case, we'll need to create a custom show-hide columns menu, and use the "setOptions" to change the columns we want to show, to get more performance. Sometimes, our datasource can have thousand of "custom fields", it's very variable, and there's no reason to have a slow DOM if I only need to show less than 10-15 columns.
We were able to get a little more performance by removing almost all templates, and use function template instead of kendo template when we can, but it doen't solve all problems.
The columns that are marked as hidden initially would be expected to be rendered with the "display: none" style applied, in the majority of the cases. As well as, the hideColumn and showColumn are designed to be working with the elements on the client-side. If the columns are not rendered, then, the grid would have to be reinitialized.
Actually, this is exactly what the setOptions method doing. It is forcing the grid to reinitialize. As well as, it would perform a Read request to the remote endpoint. And this would generate additional traffic which is not needed as the data is already present on the client.
I believe that there are no plans for changing the rendering of the hidden columns as not rendering them at all might not be intuitive. As well as this would introduce a breaking change in the grid. And, we are aiming for not introducing such changes. What I can recommend is to log a feature request in our public Feedback Portal which would be investigated by the development team:
As per the DOM operations being slow, the Kendo UI team has no control over the render times and mechanism of the browsers. If the show/hide methods take long time, instead of sending a request, you might be showing a loading indicator over the table of the grid. Which would indicate to the user that an operation is under execution.
Thank you. I think that we may add some performance by setting "template=$.noop" for invisible columns...
That will generate a lighter DOM, and we don't have to do nothing special when a column is hidden.
All we need to do is manually handle the "showColumn", and then, call a setOptions with the real teamplate of that column.
Or can we change the template in real-time without using showOptions, and only call a "refresh" ?
Internally the templates are compiled when the _templates method is executed. Thus, you could execute it after you modify the template and before the grid is refreshed.
Below you will find a small sample which demonstrates the above approach: