CODEWITHSUNDEEP
asp.nettreeviewscroll
Dominic
Dominic

Reputation: 712

ASP.Net TreeView Scrolling the selected node into view

Is there a way to scroll the selected node of an ASP.Net TreeView into view after a postback?

In my parrticular scenario the control is repopulated after each postback.

Thanks!

Upvotes: 2

Views: 12292

Answers (5)

JJ_Coder4Hire
JJ_Coder4Hire

Reputation: 4901

Add this method to your code behind. It worked for me. replace treeView with the ID of your treeView control.

    protected override void OnPreRender(EventArgs e) {
        //return some code to run on the client
        string jsScript = @"
            <script language=javascript>
                function Tree_scrollIntoView() {
                    var data = " + treeView.ClientID + @"_Data;
                    if (!data) {
                        return;
                    }
                    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)
                            }
                        }
                    }
                }

                $(document).ready(function () {
                    Tree_scrollIntoView();
                });                    
            </script>";

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

        base.OnPreRender(e);
    }

Upvotes: 0

justin
justin

Reputation: 21

Here is the solution for treeview when click to particular tree node it just scroll to the concern title of the page(not re-direct), for this we have simple HTML code is there, now we see what is it...

<html>

<body>

  <div id="sidebar">
        <ul>
           <li><a href="#contacts" >Contact</a></li>

                /***here is the link*****/`
        </ul>
   </div>

<div style="height: 250px;" id="contacts">

            /*here your content*/

       </div>

</body>

</html>

Upvotes: 2

Josh Allen
Josh Allen

Reputation: 132

I used Paul's approach and it worked for me. I have a TreeView in an update panel inside a user control that gets rebuilt during each PreRender. As soon as the TreeView is build I run the following. 

if (Page.IsPostBack)
        {
            string s2 = @"var elem = document.getElementById('{0}_SelectedNode');
                          if(elem != null )
                          {
                                var node = document.getElementById(elem.value);
                                if(node != null)
                                {
                                     node.scrollIntoView(true);
                                }
                          }
                        ";
            ScriptManager.RegisterStartupScript(this, this.GetType(), "myscript", s2.Replace("{0}", tvOrgChart.ClientID), true);
        }

Credit goes to Paul Kimmel

Upvotes: 2

Shahar Mosek
Shahar Mosek

Reputation: 1982

You could also use the following code:

        var elem = document.getElementById('TreeView1_SelectedNode');   
        if(elem != null )   
        {     
            var node = document.getElementById(elem.value);     
            if(node != null)     
            {       
                node.scrollIntoView(true);       
            }   
        }

Credit goes to Paul Kimmel

Upvotes: 0

Dominic
Dominic

Reputation: 712

I figured it out. The TreeView control creates a javascript object on the client. It is named whatever you called the treeview with a '_Data' appended. The object lets you get a reference to the selected node.

The code below uses the ASP.Net Ajax extensions. Just remember to change the TreeView name to whatever you called yours.

var name = myTreeView_Data.selectedNodeID.value;
var selectedNode = $get(name);

if(selectedNode)
{ 
selectedNode.scrollIntoView(true);
}

Upvotes: 4

Related Questions