[RESOLVED]How to collapse the tree view after the page is loaded using javascript

Hi!

Please look the below code:

<asp:TreeView ID="TreeView1" runat="server" CssClass="treeview" DataSourceID="SiteMapDataSource1" ShowLines="True" OnTreeNodeDataBound="TreeView1_TreeNodeDataBound">
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" StartingNodeUrl="~/Modules/Reports/Report.aspx" />

My datasource for the tree view is sitemapdatasource. Now, i want the treeview be collapsed after the page is loaded.

I want to use javascript for it.

Any idea please???

hi cnsuman,

please check this thread:

http://forums.asp.net/p/1288507/2504034.aspx

hope this helps you, thanks~ 

Thank you for the suggestion

But in my case, i do not want mouseover but +/-  so that user click on + to expand and – to collapse but as a default, all subnodes should be collapsed

Did you get me please?? 

hi cnsuman,

thanks for your feedback!

according the code in the thread I post. you can modify it to meet your need.

eg.

<script type="text/javascript">
        function TreeviewExpandCollapseAll(treeViewId, expandAll) {
            var displayState = (expandAll == true ? "none" : "block");
            var treeView = document.getElementById(treeViewId);
            if (treeView) {
                var treeLinks = treeView.getElementsByTagName("a");
                var nodeCount = treeLinks.length;
                var flag = true; for (i = 0; i < nodeCount; i++) {
                    if (treeLinks[i].firstChild.tagName) {
                        if (treeLinks[i].firstChild.tagName.toLowerCase() == "img") {
                            var node = treeLinks[i];
                            var level = parseInt(treeLinks[i].id.substr(treeLinks[i].id.length - 1), 10);
                            var childContainer = GetParentByTagName("table", node).nextSibling; if (flag) {
                                if (childContainer.style.display == displayState) {
                                    TreeView_ToggleNode(eval(treeViewId + "_Data"), level, node, 'r', childContainer);
                                }
                                flag = false;
                            }
                            else {
                                if (childContainer.style.display == displayState)
                                    TreeView_ToggleNode(eval(treeViewId + "_Data"), level, node, 'l', childContainer);
                            }
                        }
                    }
                } //for loop ends
            }
        } //utility function to get the container of an element by tagname
        function GetParentByTagName(parentTagName, childElementObj) {
            var parent = childElementObj.parentNode;
            while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
                parent = parent.parentNode;
            }
            return parent;
        }

        function collapse() {
            TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', false);
        }
    </script>
</head>
<body onload="collapse()">
    <form runat='server'>
    <asp:TreeView ID="TreeView1" runat="server" CssClass="treeview" ....

 

Thank you Yanping,

but i couldn’t get it preperly please.

As i have published my Report_menu.ascx code before, i am getting the data from the sitemapdatasource and my report_menu.ascx.cs code is as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
using nsSecurity;

public partial class WebComp_Reports_reports_menu : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void TreeView1_TreeNodeDataBound(object sender, TreeNodeEventArgs e)
    {
        AppSecurity oSec = new AppSecurity();
        UserInfo oUsr = ((UserInfo)Session["UserInfo"]);
        ArrayList oRights = ((ArrayList)Session["UserRights"]);

        System.Web.UI.WebControls.TreeView menu = (System.Web.UI.WebControls.TreeView)sender;
        SiteMapNode mapNode = (SiteMapNode)e.Node.DataItem;

        // Security
        if (mapNode.ResourceKey != "")
        {
            if ((!oSec.HasAccess(oRights, oUsr, mapNode.ResourceKey)) | (mapNode.ResourceKey == "0"))
            {
                e.Node.ChildNodes.Remove(e.Node);
                TreeView1.Nodes.Remove(e.Node);
                
            }
        }
        
    }
}

 

I am not sure how do i embedd your code with my one.

Plz, help me

hi cnsuman,

To place the javascript code my previous posted in the client side(.aspx)

there defined onload event to collapse the TreeView1 using javascript.

A slite addition after making an observation durring debug. I saw src attribute was undefined, and the cause was the array of image url’s needed to have some indexes initialized. See where I asign index 15 to the content of index 5 and the same with 14 and
4. This uses the javascript generated for the tree, but in my case it was

                                eval(treeViewId + "_Data").images[14] = eval(treeViewId + "_Data").images[4];
                                eval(treeViewId + "_Data").images[15] = eval(treeViewId + "_Data").images[5];

This fixed a bug in the code I couldn’t change where img.src was assigned to data.images[14]; or 15, but evaluation shoed4 and 5 had the right url’s.

                if (lineType == "l") {
                    img.src = data.images[14];
                }

FULL CODE:

    function TreeviewExpandCollapseAll(treeViewId, expandAll)
    {
        var displayState = (expandAll == true ? "none" : "block");
        var treeView = document.getElementById(treeViewId);
        if(treeView)
        {
            var treeLinks = treeView.getElementsByTagName("a");
            var nodeCount = treeLinks.length;
            var flag = true;
            for(i=0;i<nodeCount;i++)
            {
                if(treeLinks[i].firstChild.tagName)
                {
                    if(treeLinks[i].firstChild.tagName.toLowerCase() == "img")
                    {
                        var node = treeLinks[i];
                        var level = parseInt(treeLinks[i].id.substr(treeLinks[i].id.length – 1),10);
                        var childContainer = GetParentByTagName("table", node).nextSibling;
                        if(flag)
                        {
                            if(childContainer.style.display == displayState) {
                                eval(treeViewId + "_Data").images[14] = eval(treeViewId + "_Data").images[4];
                                eval(treeViewId + "_Data").images[15] = eval(treeViewId + "_Data").images[5];
                                TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,’r’,childContainer);
                            }
                            flag = false;
                        }
                        else
                        {
                            if(childContainer.style.display == displayState)
                                TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,’l’,childContainer);
                        }
                    }
                }
            }//for loop ends
        }
    }//utility function to get the container of an element by tagname
    function GetParentByTagName(parentTagName, childElementObj)
    {
        var parent = childElementObj.parentNode;
        while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
        {
            parent = parent.parentNode;
        }
        return parent;
    }

Leave a Reply