We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to programmatically scroll to top of the treeview

Thread ID:

Created:

Updated:

Platform:

Replies:

127058 Oct 24,2016 08:26 AM UTC Oct 27,2016 12:10 PM UTC JavaScript 3
loading
Tags: ejTreeView
Madawa Wipulaguna
Asked On October 24, 2016 08:26 AM UTC

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 [Syncfusion]
Replied On October 25, 2016 12:49 PM UTC

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
Replied On October 26, 2016 03:03 PM UTC

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.

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 [Syncfusion]
Replied On October 27, 2016 12:10 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;