Apply Search On the nodes of an Treeview ASP.NET control

Abhishek Banerjee (A Web Developer)

4.50/5 (2 votes)

Feb 26, 2010

CPOL

22713

Hello All,Today I am showing an interesting block of code which will help you in applying user search on a tree view control of asp.net applications.PrerequisitesFor this you have to create an asp.net demo project using language C#Action:Step 1: Now Create a web page with name...

Hello All, Today I am showing an interesting block of code which will help you in applying user search on a tree view control of asp.net applications. Prerequisites For this you have to create an asp.net demo project using language C# Action: Step 1: Now Create a web page with name TreeViewS.aspx . Step 2: Now Paste the below code there.

//The Search Page code (Design of page)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeViewS.aspx.cs" Inherits="webUI_TreeViewS" %>

<!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 runat="server">
    <title>Abhishek TreeView FindNode</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h3>
            TreeView FindNode Using User Input</h3>
        <strong>Search Criteria:</strong>(Use a forward slash (/) to delimit each node value.)<br />
        <asp:TextBox ID="ValueText" runat="server" Text="Table/Example One/Section 1.0"
            Width="50%"></asp:TextBox>
        <br />
        <br />
        <asp:Button ID="Submit" runat="server" OnClick="Button_Click" Text="Find Node" />
        <br />
        <br />
        <asp:TreeView ID="MainTree" runat="server" Font-Names="Arial" ForeColor="Blue" PathSeparator="/">
            <LevelStyles>
                <asp:TreeNodeStyle ChildNodesPadding="10" Font-Bold="true" Font-Size="12pt" ForeColor="DarkGreen" />
                <asp:TreeNodeStyle ChildNodesPadding="5" Font-Bold="true" Font-Size="10pt" />
                <asp:TreeNodeStyle ChildNodesPadding="5" Font-Size="10pt" Font-Underline="true" />
                <asp:TreeNodeStyle ChildNodesPadding="10" Font-Size="8pt" />
            </LevelStyles>
            <Nodes>
                <asp:TreeNode SelectAction="None" Text="Table">
                    <asp:TreeNode Text="Example One" Value="Example One">
                        <asp:TreeNode Text="Section 1.0" Value="Section 1.0">
                            <asp:TreeNode Text="Topic 1.0.1" Value="Topic 1.0.1"></asp:TreeNode>
                            <asp:TreeNode Text="Topic 1.0.2" Value="Topic 1.0.2"></asp:TreeNode>
                            <asp:TreeNode Text="Topic 1.0.3" Value="Topic 1.0.3"></asp:TreeNode>
                        </asp:TreeNode>
                        <asp:TreeNode Text="Section 1.1">
                            <asp:TreeNode Text="Topic 1.1.1" Value="Topic 1.1.1"></asp:TreeNode>
                            <asp:TreeNode Text="Topic 1.1.2" Value="Topic 1.1.2"></asp:TreeNode>
                            <asp:TreeNode Text="Topic 1.1.3" Value="Topic 1.1.3"></asp:TreeNode>
                            <asp:TreeNode Text="Topic 1.1.4" Value="Topic 1.1.4"></asp:TreeNode>
                        </asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode Text="Example Two" Value="Example Two">
                        <asp:TreeNode Text="Section 2.0" Value="Section 2.0">
                            <asp:TreeNode Text="Topic 2.0.1" Value="Topic 2.0.1"></asp:TreeNode>
                            <asp:TreeNode Text="Topic 2.0.2" Value="Topic 2.0.2"></asp:TreeNode>
                        </asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
    </div>
    </form>
</body>
</html>

Step 3: Now paste the below C# code in your web page code file (.CS) file.

//C# Code
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.Drawing;

public partial class webUI_TreeViewS : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //This Code is for highlight the selected node
        if (!IsPostBack)
        {
            MainTree.SelectedNodeStyle.ForeColor = Color.Red;
        }
    }
    protected void Button_Click(object sender, EventArgs e)
    {
        try
        {
            TreeNode node = MainTree.FindNode(Server.HtmlEncode(ValueText.Text.Trim()));
            if (node != null)
            {
                // Indicate that the node was found.
                node.Select();
                ValueText.Text = "";
            }
            else
            {
                // Indicate that the node is not in the TreeView control.
                ValueText.Text = "The specified node (" + ValueText.Text + ") is not in this TreeView control.";
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
}

Now set this page as start page , then compile and run the project. :) Now Type the name of node for search the node will be selected autometicaly in tree list. Have Fun :laugh: