Expand treeview on hover

[Jimmy]

Good morning,

I am using treeview to display a list and it's children underneath. I want to implement the drag and drop functionality, soI can reorder the list.

I have 2 questions regarding the drag and drop functionality

 

1. How do I keep track of the order, to initially save, but to reinstate it, after i revisit the list ?

Right now I keep track of parent Id's per item. But if I want to reorder the children under it's parent .. it always reorders them by Id.

 

2.  I was wondering how do I expand a parent when hovering over a parent in the list

When starting to drag a list item ... I want to insert it into a parent .. the parent just stays closed. Is there  a way to expand the parent on hover?

 

Thank you for the help up front

[Svet]

Hi Jimmy,

1.

I am not sure that I understand the exact requirement on this point, but if the initial data array that is passed to the TreeView is stored it can be reused at any point in order to re-instantiate the TreeView in its initial order. Please let me know in case such an approach wouldn't be suitable. If that is the case please provide a bit more details on the use-case scenario. Thank you.

2.

The expandNode() and collapseNode() functions could be called to manually expand or collapse an item on the (nodeDrag) event. For this purpose, some custom logic should be implemented to determine when to call these functions. Please see the following example demonstrating how to expand a node manually when dragging:

https://stackblitz.com/edit/angular-9mxntd?file=app/app.component.ts

I will need to further consult with the dedicated TreeView developers as to why the loading spinners of the expanded items aren't removed and will get back to you next week.

Feel free to write back in case further information is required for this case.

Regards,
Svet
Progress Telerik

[Svet]

Hi Jimmy,

The TreeView rebindChildren() method can be called to stop the display of the loading spinners when the children are loaded. Such an approach in this example won't show the loading spinners at all since the used data is local:

https://stackblitz.com/edit/angular-9mxntd-dpklnh?file=app/app.component.ts

I hope this helps.

[Jimmy]

Thank you very much, this already has been very helpful.

The only thing not working is the rebindchildren as I am getting an error. Is this a question of library version ?

Property 'rebindChildren' does not exist on type 'TreeViewComponent'

[Svet]

That is possible. I can suggest updating the TreeView package to its latest to ensure that the latest feature and enhancements are available:

https://www.telerik.com/kendo-angular-ui/components/treeview/changelog/