We are using the kendo-ui Dropdowntree control in our VueJS app.
If we have around 1100+ rows of data in our hierarchy, we find that the Browser screen freezes until the Dropdowntree control is finished populating.
Most of our hierarchies are much smaller and the control populates quickly as expected.
But we have 1135 rows in our hierarchy in one of our examples. The data is fetched from our API and returned to our Vuejs app, in a few seconds. But after the Vuejs load function finishes and the code is about to return to the UI, the screen freezes for about 10 seconds while the Dropdowntree control is populating. Nothing can be clicked while the screen is frozen.
How can we avoid the screen freezing while the Dropdowntree control is populating where the hierarchy rows are large?
1 Answer, 1 is accepted
Hi Jerry,
There are two options I can suggest to you:
- Option 1: Configure the DropDownTree with the load-on-demand property set to true. With this configuration, if not all of the mentioned 1000+ rows are in one level, the different levels of the hierarchy will be fetched and rendered if the user needs this data.
- Option 2: Keep your current implementation and add a Loader that appears over all the items on your page while the elements of the DropDownTree are loading.
I hope the suggested above options will help you optimize the user experience in your application.
Regards,
Petar
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Iron
Setting this:
Solves the issue. The form is usable while the DropDownTree finishes populating.
Hi, Jerry.
I am happy to hear that the load-on-demand property has helped you achieve what you need in your application.
Rank 1
Iron
Iron
Iron
One additional question on the subject of the "load-on-demand " property.
When "load-on-demand =true, the above freezing problem goes away.
However, another issue occurs, The ":value" isn't working correctly.
For example, when 'editing" a record that has an array of values for the dropdowntree, the dropdowntree does not get it's items checked. The control displays it's hierarchy correctly, but the values in the hierarchy do not get auto selected. In other words, when editing the form and 3 out of 100 nodes in the dropdowntree should be checked, none of the nodes get checked.
If I click on the dropdowntree, and expand some nodes, the correct hierarchy items suddenly get their checkbox checked and the label on the control appears "3 item(s) selected".
Setting the "load-on-demand=false" fixes this but then I have my original freezing issue.
Is there a way to ensure that the ":value" property gets set correctly when the form/dropdowntree is displaying?
Hi, Jerry.
I am afraid that the Load on demand functionality of the DropDownTree is not compatible with the check-children functionality of the component. The limitation is in the Kendo UI for jQuery DropDownTree which is used in the DropDownTree Wrapper component under the hood.
More about the mentioned limitation you can find on this feedback portal thread.
In this situation, if you are using the DropDownTree with checkboxes, I would suggest you use the already proposed option of showing the Loader component. In this scenario, you will have to set the load-on-demand property to false and show the Loader component while the DropDownTree is rendering.