Hi Vasya,

Thanks for the reply.

I tried the below code in my client side.

function WebDataTree1InitializeTree(sender, eventArgs)
{
tree = sender;

if (tree.get_selectedNodes()[0] != null) 

{
var node = sender.get_selectedNodes()[0];
var treeElement = sender.get_element();
sender._scrollToNode(node, treeElement);
}
}

This function is fine when the tree gets initialised for the first time.

But my requirement is that, on run time, i set the node using  node.set_selected(true);, based on the search.

Inspite of the node getting selected, its doesnt scroll into view as this WebDataTree1InitializeTree does not get called everytime i set the node.

Can u please guide me on this.

Hello Jeevitha,

Thank you for getting back to me.

I made a small sample illustrating my suggestion and I am attaching it for your reference.

In my project on a button click I am programmatically selecting a node at the bottom of the tree and I am scrolling this node into view using scrollIntoView method. For example:

function selectedNodeScrollItIntoView() {

 var tree = $find('WebDialogWindow1_tmpl_WebDataTree1');
 tree.getNode(11).set_selected(true);

 if (tree.get_selectedNodes()[0] != null) {
 var node = tree.get_selectedNodes()[0];
 var treeElement = tree.get_element();
tree.get_selectedNodes()[0].get_element().scrollIntoView();
}
}

Please note that SelectionType property of the WebDataTree have to be set, in this case it is set to Single.

 <ig:WebDataTree ID="WebDataTree1" runat="server" Height="300px" Width="200px" SelectionType="Single">

Have a look at the provided sample and let me know if you have any additional questions regarding this matter.

I hope you find this information helpful.

Thanks for the quick reply!!

Even i have a button, on that button click, i have the following function called.

function ViewAccountProperties_FindNextClicked(txtid,treeid)
{
var txtbx = document.getElementById(txtid);

if (txtbx.value != "")
{
node = findNext(treeid, regex);

var tree = $find(treeid);
if (tree != null && typeof tree != 'undefined')
{
if (node != null)
{
node.set_selected(true);
if (tree.get_selectedNodes()[0] != null)
{
var node = tree.get_selectedNodes()[0];
var treeElement = tree.get_element();
tree.get_selectedNodes()[0].get_element().scrollIntoView();
}
}
}
}

}

Design code -

<ignav:WebDataTree ID="WebDataTree1" CssClass="CBDefaultStyle" EnableViewState="true" runat="server" width="100%" height="230px"
FullNodeSelect="True" SelectionType="Single" AutoPostBack="false" OnNodeChanged="WebDataTree1_NodeChanged1" BorderColor="WhiteSmoke"
BorderWidth="2px" BorderStyle="Solid">
<ClientEvents Initialize="WebDataTree1InitializeTree"></ClientEvents>
<ClientEvents NodeClick="NodeClick"/>
</ignav:WebDataTree>

This code, however works for the root nodes, but when child nodes are selected, it doesnot expand and scroll to view the searched child node. Can u please let me know wht iam missing.

Hello Jeevitha,

What I can suggest in case that you would like to scroll a child node into vie is expanding it`s parent prior to calling scrollIntoView method. You could check whether the node that will be scrolled into view has parent and if so to expand the parent and afterwards scroll the node. For example:

function selectedNodeScrollItIntoView() {

 var tree = $find('WebDialogWindow1_tmpl_WebDataTree1');

 tree.getNode(11).get_childNode(0).set_selected(true);
 // tree.getNode(11).set_selected(true);
 if (tree.get_selectedNodes()[0] != null) {
 var node = tree.get_selectedNodes()[0];
 if (node.get_parentNode() != null) {
 node.get_parentNode().set_expanded(true);
}

 var treeElement = tree.get_element();
tree.get_selectedNodes()[0].get_element().scrollIntoView();

}


}

I modified my sample and I am attaching it for your reference.

I hope you find this information helpful.

Please let me know if you need any further assistance with this matter.

Thanks Vasya for your timely reply and was very helpful.

It worked :)

Hello Jeevitha,

I am glad that you find my suggestion helpful.

Please let me know if you need any further assistance with this matter.