LoadMoreDirective for MultiSelectTree?

[Martin]

I am presently utilizing a MultiSelectTree to display an extensive hierarchical dataset. Despite employing load on demand, performance suffers notably when a single level contains numerous elements.

I have come across a solution tailored for the TreeView to address this concern, wherein a limit for elements per level can be set, accompanied by a "load more" button once the limit is reached.

Is there a way to adapt this solution for the MultiSelectTree? Alternatively, are there other remedies available for optimizing performance with the MultiSelectTree?

[Yanmario]

Hi Martin,

In such a specific scenario TreeView offers load more functionality that will avoid performance issues. The load more functionality of MultiSelectTree is currently undergoing a voting process on our feedback portal.

https://feedback.telerik.com/kendo-angular-ui/1564370-multiselecttree-virtualization

I will add a vote on your behalf to support the feature. In the meantime using the TreeView would be the preferred approach. The developer can also render chips above the component when a node is selected or do some customization to fit the specific application requirements.

Regards,
Yanmario
Progress Telerik

[Martin]

Hi Yanmario,

Thank you for your prompt response and for adding a vote on my behalf for the MultiSelectTree load more feature.

I appreciate your suggestion to utilize the TreeView in the meantime. Could you please provide some guidance on which Kendo components can be used to develop a custom MultiSelectTree with the load more functionality? I do understand to use the TreeView but I still need the Multi-Select with the dropdown functionality. I'm wondering what Kendo component I could best use for this.

Best regards,
Martin

[Yanmario]

Hi Martin,

In theory, you could possibly have an input that triggers a popup with the TreeView component inside and based on the selection render chips something like the following demo:

https://www.telerik.com/kendo-angular-ui/components/buttons/chip/

but it will use a separate input and a popup component.

A second option that I was able to make a quick example of is to use the MultiSelect and utilize its templates to render a TreeView and based on the selection to bind the MultiSelect value to it which will render the chips. An example that I was able to quickly create which isn't fully tested and some modifications might be needed:

https://stackblitz.com/edit/angular-ypnd1m?file=src%2Fapp%2Fapp.component.ts

This is more or less the MultiSelectTree, but customly integrated between two components.

I hope this helps and steers you in the right direction.

Regards,
Yanmario
Progress Telerik