Skip to main content

ASP.net TreeView Tips and Trics

In this Post i will show
  1. How to Automatically check all ChildNode CheckBoxes on Checking ParentNode CheckBox using JavaScript
  2. How to get checked value from treeview
  3. How To open Treeview in ModalPopupExtender control
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
   <title>Untitled Page</title>
   <style type="text/css">
       .modalBackground {
           background-color:Gray;
           filter:alpha(opacity=70);
           opacity:0.7;
       }

       .modalPopup {
           background-color:#FFD9D5;
           border-width:3px;
           border-style:solid;
           border-color:Gray;
           padding:3px;
           width:250px;
       }
   </style>
</head>
<body>
   <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
       </asp:ScriptManager>
       <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">
           <asp:UpdatePanel ID="UpdatePanel1" runat="server">
               <ContentTemplate>
                   <asp:TreeView ID="TestTreeView" runat="server" onclick="SelectAllChildNodes();" OnSelectedNodeChanged="TestTreeView_SelectedNodeChanged"
                       ShowCheckBoxes="All" >
                       <Nodes>
                           <asp:TreeNode Text="My Computer" Value="My Computer">
                               <asp:TreeNode Text="Favorites" Value="Favorites">
                                   <asp:TreeNode Text="News" Value="News">
                                       <asp:TreeNode Text="MSN" Value="MSN" />
                                       <asp:TreeNode Text="MSNBC News" Value="MSNBC News" />
                                   </asp:TreeNode>
                                   <asp:TreeNode Text="Technology" Value="Technology">
                                       <asp:TreeNode Text="Microsoft" Value="Microsoft" />
                                       <asp:TreeNode Text="ASP.NET" Value="ASP.NET" />
                                       <asp:TreeNode Text="GotDotNet" Value="GotDotNet" />
                                       <asp:TreeNode Text="MSDN" Value="MSDN" />
                                   </asp:TreeNode>
                                   <asp:TreeNode Text="Shopping" Value="Shopping">
                                       <asp:TreeNode Text="MSN Shopping" Value="MSN Shopping" />
                                       <asp:TreeNode Text="MSN Autos" Value="MSN Autos" />
                                   </asp:TreeNode>
                               </asp:TreeNode>
                               <asp:TreeNode Text="City Links" Value="City Links">
                                   <asp:TreeNode Text="MapPoint" Value="MapPoint" />
                                   <asp:TreeNode Text="MSN City Guides" Value="MSN City Guides" />
                               </asp:TreeNode>
                               <asp:TreeNode Text="Music Links" Value="Music Links">
                                   <asp:TreeNode Text="MSN Music" Value="MSN Music" />
                               </asp:TreeNode>
                           </asp:TreeNode>
                       </Nodes>
                   </asp:TreeView>
                   <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
               </ContentTemplate>
           </asp:UpdatePanel>
           <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
           <asp:Button ID="btnSend" runat="Server" Text="Send" OnClick="btnSend_Click" />
       </asp:Panel>
       <asp:Button ID="btnOpen" runat="server" Text="Open" />
       <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="myMPE1" runat="server"
           TargetControlID="btnOpen" PopupControlID="Panel1" CancelControlID="btnCancel"
           BackgroundCssClass="modalBackground">
       </ajaxToolkit:ModalPopupExtender>

       <script type="text/javascript" language="javascript">
           Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
           function EndRequestHandler(sender, args){
               alert($get("<%=TextBox1.ClientID %>").value);
               $find("myMPE1").hide();
           }
       </script>

       <asp:GridView ID="A" runat="Server">
           <Columns>
           </Columns>
       </asp:GridView>

       <script type="text/javascript" language="javascript">
   function SelectAllChildNodes()
   {
       //debugger;
       var obj = window.event.srcElement;
       var treeNodeFound = false;

       var checkedState;
       if (obj.tagName == "INPUT" && obj.type == "checkbox")
       {
           var treeNode = obj;
           checkedState = treeNode.checked;
           do
           {
               obj = obj.parentElement;
           } while (obj.tagName != "TABLE")
         
           var parentTreeLevel = obj.rows[0].cells.length;          
           var parentTreeNode = obj.rows[0].cells[0];
           var tables = obj.parentElement.getElementsByTagName("TABLE");
           var numTables = tables.length;
           if (numTables >= 1)
           {
               for (iCount=0; iCount < numTables; iCount++)
               {
                   if (tables[iCount] == obj)
                   {
                       treeNodeFound = true;
                       iCount++;
                       if (iCount == numTables)
                       {
                           return;
                       }
                   }
                   if (treeNodeFound == true)
                   {
                       var childTreeLevel = tables[iCount].rows[0].cells.length;
                       if (childTreeLevel > parentTreeLevel)
                       {
                           var cell = tables[iCount].rows[0].cells[childTreeLevel - 1];
                           var inputs = cell.getElementsByTagName("INPUT");
                           inputs[0].checked = checkedState;
                       }
                       else
                       {
                           return;
                       }
                   }
               }
           }
       }
   }
       </script>

   </form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Collections.Generic;
public partial class Test : System.Web.UI.Page
{

    string nodelist = "";
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSend_Click(object sender, EventArgs e)
    {
        ArrayList arr = new ArrayList();
        arr.Add(GetCheckedNodes());
        A.DataSource = arr;
        A.DataBind();
    }
    protected void TestTreeView_SelectedNodeChanged(object sender, EventArgs e)
    {
        TextBox1.Text = TestTreeView.SelectedNode.Text;
    }
  
    public string GetCheckedNodes()
    {

        foreach (TreeNode node in TestTreeView.Nodes)
        {
            nodelist += FindCheckedNodes(node, ref nodelist);
        }
        return nodelist;
    }

    private string FindCheckedNodes(TreeNode node, ref string nodelist)
    {
        if (node.Checked == true) nodelist += node.Text + ',';
        foreach (TreeNode childNode in node.ChildNodes)
        {
            FindCheckedNodes(childNode, ref nodelist);
        }
        return nodelist;
    }


}

Comments

  1. Thanks for a very good example! keep it up! =)

    ReplyDelete

Post a Comment

Popular posts from this blog