Scroll to selected node treeview

Hi, I am trying to select a node in a treeview, but the problem is that the scroll does not go to the right position. Anyone knows how to do it? Thanks in advance

Re: Scroll to selected node treeview

good!!!

Re: Scroll to selected node treeview

Hi,

I have same problem as you...if you get any idea then let me know

Thanks in advance

Regards,
Jagdish Sakhiya
IVAPS Pvt LTD, Bangalore

Re: Scroll to selected node treeview

jagdish_ce

Hi,

I have same problem as you...if you get any idea then let me know

Thanks in advance

Regards,
Jagdish Sakhiya
IVAPS Pvt LTD, Bangalore

AND ME TOO!! I find some said "in javascript get the nodeid.then use .node.scrollIntoView" ..But it doesn"t work ..ie pro:document.all(...)is null.or the object haven't the mothed...

Re: Scroll to selected node treeview

Are you using the TreeView in ASP.Net 2.0?

If so, the Element ID convention is TreeView.ID + Node Index.

The javascript syntax to scroll to the 99th node on a TreeView whose ID is "TreeView" is:
document.all("TreeView99").scrollIntoView(true);

I have been trying to find the elementID of a node, and can't seem to get it (with the new ASP.Net 2.0 TreeView). In the Web Control version (pre 2.0) I could programmatically select the node, then register a client side script to ZoomToSelectedNode, which worked great. Unfourtunately, in ASP.Net 2.0 the tree view doesn't seem to support TreeView.selectedNodeIndex (javascript property). I am still working on it!

If you are using the older version of the web control, I can give you specific code examples of how to do it.

Re: Scroll to selected node treeview

Hi,

Thanks for help........ Can you send me code....so, i can understand it.........

Thanks in advance

Regards,

Jagdish Sakhiya

Re: Scroll to selected node treeview

Hi,

I have the same problem. Thanks for your ideas........ Can you send the code me also....then, i can understand it.........

Thanks in advance

Regards,

- Ruwan Siriwardena

Re: Scroll to selected node treeview

Hi,

Can you send me the specific code examples....

Thanks in advance

Regards,

Timo Korhonen

Re: Scroll to selected node treeview

I have found a solution that works for me:

//the client-side ID of the SelectedNode of TreeView1 is

//stored in an hidden input named TreeView1_SelectedNode

var inpSelectedNode = document.getElementById("TreeView1_SelectedNode");

if (inpSelectedNode.value != "")

{

var objScroll = document.getElementById(inpSelectedNode.value);

//my treeview is contained in a scrollable div element

divTree2.scrollTop = findPosY(objScroll);

//this works as well bu, but there is not as much control over the y position

//document.all(inpSelectedNode.value).scrollIntoView(true);

}

function findPosX(obj)

{

var curleft = 0;

if (obj.offsetParent)

{

while (obj.offsetParent)

{

curleft += obj.offsetLeft

obj = obj.offsetParent;

}

else if (obj.x)

curleft += obj.x;

return curleft;

}

function findPosY(obj)

{

var curtop = 0;

if (obj.offsetParent)

{

while (obj.offsetParent)

{

curtop += obj.offsetTop

obj = obj.offsetParent;

}

else if (obj.y)

curtop += obj.y;

return curtop;

}

The findPosY function was "borrowed" from here:

http://www.quirksmode.org/js/findpos.html

Thanks,
Jeff

Re: Scroll to selected node treeview

Hi,

I tried your solution.

How come document.getElementById("TreeView1_SelectedNode") return me a NULL?

Did you try this code in ASP 2.0?

Thanks

Re: Scroll to selected node treeview

My Treeview is named tvInfoDocs. The wrapper div is named divScroll. The solution for asp.net 2.0 to scroll a wrapper div to the selected node is as follows:

function scrollNodeIntoView() {

var name = tvInfoDocs_Data.selectedNodeID.value;

var selectedNode = document.getElementById(name);

if (selectedNode == null) {

alert('selectednodeis null');

}

else {var tvDiv = document.getElementById('divScroll');

tvDiv.scrollTop = findPosY(selectedNode);

tvDiv.scrollLeft = findPosX(selectedNode);

}

function findPosX(obj) {

var curleft = 0;

if (obj.offsetParent) {

while (obj.offsetParent) {

curleft += obj.offsetLeft

obj = obj.offsetParent;

}

else if (obj.x)

curleft += obj.x;

return curleft;

}

function findPosY(obj) {

var curtop = 0;

if (obj.offsetParent) {while (obj.offsetParent) {

curtop += obj.offsetTop

obj = obj.offsetParent;

}

else {if (obj.y) {

curtop += obj.y;

}

return curtop;

}

Re: Scroll to selected node treeview

hi i have tried above sol.

but i have postback on tree view and when page is loded after post back it will come in normal position and it losses the scroll position

Re: Scroll to selected node treeview

You can use script below, place it on prerender event, just replace trvw with name of your TreeView control

I have commented out div element which I am using on my web part

            string jsScript = @"<script language=javascript>
                                window.onload = function()
                            {
                               var data = " + trvw.ClientID + @"_Data;
                              // var objDiv = document.getElementById(""trvw_scroll"");
                                   if (!data)
                                    {
                                  return;

// if(objDiv!=null)
                                       // {
                                            //objDiv.scrollTop = objDiv.scrollHeight;
                                       // };

                                     }
                                    if ((typeof(data.selectedClass) != ""undefined"") && (data.selectedClass != null))
                                     {
                                        var id = data.selectedNodeID.value;
                                        if (id.length > 0)
                                        {
                                            var selectedNode = document.getElementById(id);
                                            if ((typeof(selectedNode) != ""undefined"") && (selectedNode != null))

                                                {
                                                       selectedNode.scrollIntoView(true)
                                                }
                                        }

                                    }
                                   // if(objDiv!=null)
                                       // {
                                            //objDiv.scrollLeft = 0;
                                       // };
                                }</script>";

            string jsScriptKey="Scroll_treeview_to_selected";
            if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(),jsScriptKey))
            {
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), jsScriptKey, jsScript);
            }

Re: Scroll to selected node treeview

In order to avoid conflict with others windows.onload calls I have modified my code, Out of the box java script function used to add Tree_scrollIntoView function to Ques of window.onload calls - _spBodyOnLoadFunctionNames(function_name) :

             string jsScript = @"<script language=javascript>
                                 function Tree_scrollIntoView()
                            {
                               var data = " + trvw.ClientID + @"_Data;
                              // var objDiv = document.getElementById(""trvw_scroll"");
                                   if (!data)
                                    {
                                  return;

// if(objDiv!=null)
                                       // {
                                            //objDiv.scrollTop = objDiv.scrollHeight;
                                       // };

_spBodyOnLoadFunctionNames.push(""Tree_scrollIntoView"");

</script>";

            string jsScriptKey="Scroll_treeview_to_selected";
            if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(),jsScriptKey))
            {
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), jsScriptKey, jsScript);
            }

Re: Scroll to selected node treeview

Dear,

Thank you i have used your solution.

it is working now with me

Reqards,

Mohammed Atef

http://mohammedatef.wordpress.com/