How to programmatically scroll to top of the treeview

[Madawa Wipulaguna]

Hi,

    We have a dinamically populated treeview with scroll function. For some scenarios we are un-selecting nodes programmatically using below code

 var treeView = $(treeViewId).data("ejTreeView");

 var selectedNode = treeView.getSelectedNode();

 var id = selectedNode[0].id;

 treeView.unselectNode($("#" + id));

This un-selects the node. Then we need to display the top of the treeview since there isn't any selected node. Tried using treeView.refresh() and $(treeViewId).ejTreeView("refresh");, they don't work.

How can we achieve this?

Best Regards,
Madawa

[Karthik Ravichandran]

Hi Madawa, 

 

Thanks for contacting Syncfusion support. 

 

 

We have analysed your query and you can achieve your requirement by using “ensureVisible” method of TreeView. This method is used to visible the TreeView node by using the node id. Please refer the below code block to achieve this. 

 

[script] 

var treeView = $("#treeview").data("ejTreeView"); 

var selectedNode = treeView.getSelectedNode(); 

var id = selectedNode[0].id; 

treeView.unselectNode($("#" + id)); 

treeView.ensureVisible($("#1"));   // #1 represents the id of the root element 

 

To know more details about this method, please refer the below link.
https://help.syncfusion.com/api/js/ejtreeview#methods:ensurevisible  

 

Based on your requirement we have prepared the sample and you can get it from below link.
http://jsplayground.syncfusion.com/5nmnegqu 

 

Please let us know if you need any further assistance 

 

Regards, 

Karthik R 

[Madawa Wipulaguna]

Hi,

    Thank you for the solution. This works only when the treeview is visible. We have the treeview inside an inhouse dropdown. When 'treeView.unselectNode($("#" + id));' executes, the dropdown is already closed. And still it unselects the node. But 'treeView.ensureVisible($("#1"));' executes it doesn't do anything. Because the treeview is not visible (dropdown is closed). 

We have enabled the deep-watch and cleared the datasource and re-assigned the datasource to the treeview. still no luck.

I have created a jsplayground sample which replicates our implementation of ej-treeview. But couldn't put it inside a dropdown. Commented out what I have tried.

http://jsplayground.syncfusion.com/wokjekoc

If there is a way to re-initialize (re-render) the treeview with the data source that would be great. 

Best Regards,
Madawa

[Karthik Ravichandran]

Hi Madawa, 

Thanks for your update. 

We have analyzed your query. We would like to let you know that, you can achieve your requirement by using dropdown “beforePopupShown” event. Please call the “ensurevisible” method of TreeView with selected tree node id. If node is selected, scroll into the selected node, otherwise scroll move into root element. 

Based on your requirement we have prepared the sample, please refer the below link
http://jsplayground.syncfusion.com/2ryeuy1r

 

Please let us know if you need further assistance on this. 

Regards, 

Karthik R