Expand Collapse ASP.Net TreeView node on Button Click using jQuery

Last Reply 4 months ago By pandeyism

Posted 4 months ago

Hi i have a treenode in my project with expand and collapse button. my problem is when ever i hit expand or collapse the treeview will hide and it ll reload. i want it happen without closing and reloadind. 

please help

        <div id="treeViewDiv" style="overflow:auto;height:98%;width:100%">
            <div class="row" style="margin:10px 10px 10px 10px">
               <%-- <asp:HiddenField id="hdnStatus" runat="server" />--%>
                    <asp:Button ID="btnShowHide" CssClass="button"  runat="server" Text="Hide" Height="30px" Width="70px" onclick="btnShowHide_Click" />
                    <asp:Button ID="collapse" runat="server" CssClass="button"  OnClick="collapse_Click" Text="Collapse"  Height="30px" Width="73px"   />
                    <asp:Button ID="Expand" runat="server" CssClass="button"  OnClick="Expand_Click" Text="Expand"   Height="30px" Width="72px" />
                </div>
                  
                <asp:TreeView ID="tvBookContent" runat="server" OnSelectedNodeChanged="tvBookContent_SelectedNodeChanged"
                    ImageSet="WindowsHelp" ExpandDepth="0" ShowLines="True" Width="950px">
                    <LeafNodeStyle CssClass="leafNode" />
                    <NodeStyle CssClass="treeNode" />
                    <RootNodeStyle CssClass="rootNode" />
                    <SelectedNodeStyle CssClass="selectNode" />
                    <%--<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
                    <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="1px" />
                    <ParentNodeStyle Font-Bold="False" />
                    <SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px" />--%>
                </asp:TreeView>
            </div>

 

protected void Expand_Click(object sender, EventArgs e)
{
    tvBookContent.ExpandAll();
    Expand.Enabled = false;
    collapse.Enabled = true;                      
}
protected void collapse_Click(object sender, EventArgs e)
{
    tvBookContent.CollapseAll();
    collapse.Enabled = false;
    Expand.Enabled = true;                    
}

 

You are viewing reply posted by: pandeyism 4 months ago.
Posted 4 months ago

Hi suhaas121,

Please refer below sample.

HTML

<div>
    <button id="expand" type="button">
        Expand All</button>
    <asp:TreeView ID="treeview" runat="server" ImageSet="WindowsHelp" ExpandDepth="0"
        ShowLines="True" Width="950px">
        <LeafNodeStyle CssClass="leafNode" />
        <NodeStyle CssClass="treeNode" />
        <RootNodeStyle CssClass="rootNode" />
        <SelectedNodeStyle CssClass="selectNode" />
    </asp:TreeView>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#expand").on("click", function () {
            var treeview = $("#treeview");
            $(treeview).find('img').trigger('click');
            if ($(this).html() == 'Expand All') {
                $(this).html("Collapse All");
            }
            else {
                $(this).html("Expand All");
            }
        });
    });
</script>

Namespaces

C#

using System.Data.SqlClient;
using System.Data;
using System.Configuration;

VB.Net

Imports System.Data
Imports System.Data.SqlClient

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = this.GetData("SELECT Id, Name FROM VehicleTypes");
        this.PopulateTreeView(dt, 0, null);
    }
}

private void PopulateTreeView(DataTable dtParent, int parentId, TreeNode treeNode)
{
    foreach (DataRow row in dtParent.Rows)
    {
        TreeNode child = new TreeNode
        {
            Text = row["Name"].ToString(),
            Value = row["Id"].ToString()
        };
        if (parentId == 0)
        {
            treeview.Nodes.Add(child);
            DataTable dtChild = this.GetData("SELECT Id, Name FROM VehicleSubTypes WHERE VehicleTypeId = " + child.Value);
            PopulateTreeView(dtChild, int.Parse(child.Value), child);
        }
        else
        {
            treeNode.ChildNodes.Add(child);
        }
    }
}

private DataTable GetData(string query)
{
    DataTable dt = new DataTable();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                sda.Fill(dt);
            }
        }
        return dt;
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = Me.GetData("SELECT Id, Name FROM VehicleTypes")
        Me.PopulateTreeView(dt, 0, Nothing)
    End If
End Sub

Private Sub PopulateTreeView(ByVal dtParent As DataTable, ByVal parentId As Integer, ByVal treeNode As TreeNode)
    For Each row As DataRow In dtParent.Rows
        Dim child As TreeNode = New TreeNode With {
            .Text = row("Name").ToString(),
            .Value = row("Id").ToString()
        }

        If parentId = 0 Then
            treeview.Nodes.Add(child)
            Dim dtChild As DataTable = Me.GetData("SELECT Id, Name FROM VehicleSubTypes WHERE VehicleTypeId = " & child.Value)
            PopulateTreeView(dtChild, Integer.Parse(child.Value), child)
        Else
            treeNode.ChildNodes.Add(child)
        End If
    Next
End Sub

Private Function GetData(ByVal query As String) As DataTable
    Dim dt As DataTable = New DataTable()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(query)
            Using sda As SqlDataAdapter = New SqlDataAdapter()
                cmd.CommandType = CommandType.Text
                cmd.Connection = con
                sda.SelectCommand = cmd
                sda.Fill(dt)
            End Using
        End Using

        Return dt
    End Using
End Function

 Screenshot