Best way to display hierarchy dropdown with large data set

[Jerry]

I am using Vue.js 2.x and Kendo controls.

Currently we are using the Kendo dropdowntree control to display hierarchy data.

Our control allows:

-1 or more items to be selected

-Also, once the data is saved, if the record is edited later, the dropdowntree will check each item that was previously checked.

-The properties we set in the dropdowntree:

      :data-source="items"
      tagMode="single"
      :autoClose="false"
      :checkboxes-check-children="checkChildren"
      :check-all="true"
      :placeholder="placeholder"
      dataTextField="text"
      dataValueField="id"
      @change="onChange"
      :value="selectedItems"
      style="width: 100%"
      height="400px"
      :load-on-demand="false"

 

 

The problem we have is that we have a scenario where a large hierarchy is being returned from the API with over 2000 rows.

This is causing the dropdowntree to take a long time to populate the control.

Is there a recommended way for the dropdowntree to handle large amounts of data?

Is there another control that can handle large amounts of data and display the data like the dropdowntree?

Is there another recommended way to display a hierarchy dropdown that acts like the dropdowntree?

 

[Yanko]

Hello, Jerry,

To optimize performance in this scenario, we recommend rendering the DropDownTree items in a collapsed state by default and expanding them only when necessary. This approach helps reduce the number of rendered elements and should mitigate the issue. However, please note that if you are attempting to render thousands of items at once, some browser slowdowns may still occur due to the large DOM size. There are examples in the official documentation that display how you can control which items are expanded through the `expandField` and `onExpandChange` properties.

• DropDownTree Documentation
• DropDownTree StackBlitz sample

A sufficient solution would be virtualization. However, the DropDownTree component utilizes a TreeView to display its items, and the TreeView does not support virtualization yet. I agree that such functionality would be a great enhancement to our product. Therefore, I have created a Feature request in our public feedback portal to monitor the interest in this feature through the votes and comments that our users add to the item. For your convenience, I have automatically added your vote to it:

• https://feedback.telerik.com/kendo-vue-ui/1694989-virtualization-in-treeview 

Furthermore, I notice some properties in your configuration that are not present in the API of the component, which may cause unexpected behaviour as they will not work. You can refer to the following article for more details about the available API options of the DropDownTree:

• https://www.telerik.com/kendo-vue-ui/components/dropdowns/api/dropdowntreeprops 

I hope this helps, and please let me know if you have further questions or if I can further assist you with the implementation.

Regards,
Yanko
Progress Telerik