When checking an element that has many child elements (> 30.000) it takes a while until that element becomes checked.
Found that some Telerik's Javascript code is being executed for all 30.000 elements (even nothing is being done with them from our perspective).
Example: when Option11 checkbox is clicked, page becomes unresponsive and it takes approx. 30 seconds to become checked.
Can we get some feedback why this is happening?
Thx in advance
Hi Pat,
I've already replied to your support ticket on this question but I will share the answer here as well.
It is expected to have performance issues when working with over 30.000 elements.
Here is a little background to help you understand the issue.
Unlike the basic UI components (Button, Table, Input, Span, etc.) which are simple HTML elements, the Telerik UI components are composite Controls containing multiple HTML elements.
To help you understand, I will show you the difference between the rendered HTML of a basic Button and the rendered HTML of Telerik RadButton.
Basic HTML Button
Telerik RadButton
<button type="submit" name="RadButton1" value="RadButton" id="RadButton1" class="RadButton RadButton_Default rbButton rbRounded rbIconButton" tabindex="0"> <span class="rbText">RadButton</span> <input id="RadButton1_ClientState" name="RadButton1_ClientState" type="hidden" autocomplete="off" value="{'client-state-here'}"> </button>From the comparison, you can see that the Telerik button contains more elements and information that will be posted back to the server. This structure helps it to be stylish, to contain multiple functionalities, to track the Control's state, to contain JavaScript objects that allow having JavaScript (Client-Side) APIs, and more.
When it comes to rendering tens of thousands of elements on a single page, whether using Telerik or basic HTML, browsers will already start experiencing performance issues. On top of that, if you had a JavaScript that has to loop through all of those and for each to run a condition, that decreases the performance even more.
Speaking of the DropDownTree, each item in it has a JavaScript object and can be modified using the JavaScript APIs. When you check-uncheck the parent node, the internal JavaScript logic of the DropDownTree performs multiple tasks on a single Item, and if that is multiplied by over 30.000 times, it indeed will take some time. It is not that the internal logic has issues, but processing the task so many times in a shorter period will require good processing power (better client PC, and also browsers that can work faster).
Conclusion
Rendering over 30.000 items at once is not a good idea, regardless of using Telerik or basic HTML and I am afraid we do not have a solution that can handle that much data at once without impacting the performance. Too many elements on a single page are also bad from the User Experience perspective.
Tips to improve performance
Generally speaking, ASP.NET WebForms apps are heavy on their own, and so, to improve performance, you can render a limited amount of data/HTML elements on a single page by filtering the database and only fetching the relevant records before binding those to the DropDownTree.
I hope this information will help you get a better understanding.