Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > TreeView > TreeView Filtering

Not answered TreeView Filtering

Feed from this thread
  • Telerik Admin Master avatar

    Posted on Jan 25, 2012 (permalink)

    Requirements
    RadControls version Q3 2010 or later
    .NET version 4
    Visual Studio version 2010
    programming language C#, Javascript
    browser support

    all browsers supported by RadControls

     
    PROJECT DESCRIPTION
    This project shows how to filter the Treeview, so that only the nodes that contain the text entered through the TextBox remain visible.

    ASPX:
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <script type="text/javascript">
     
            var timer = null;
             
            function clientLoad(sender) {
                $telerik.$(".riTextBox", sender.get_element().parentNode).bind("keydown", valueChanging);
            }
     
            function valueChanging(sender, args) {
                if(timer)
                {
                    clearTimeout(timer);
                }
     
                timer = setTimeout(function() {
                    var tree = $find("<%= RadTreeView1.ClientID %>");
                    var textbox = $find("<%= RadTextBox1.ClientID %>");
                    var searchString = textbox.get_value();
                 
                    for (var i = 0; i < tree.get_nodes().get_count(); i++) {
                        findNodes(tree.get_nodes().getNode(i), searchString);
                    }
                }, 200);
            }
     
            function findNodes(node, searchString) {
                node.set_expanded(true);
     
                var hasFoundChildren = false;
                for (var i = 0; i < node.get_nodes().get_count(); i++) {
                    hasFoundChildren = findNodes(node.get_nodes().getNode(i), searchString) || hasFoundChildren;
                }
     
                if (hasFoundChildren || node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) {
                    node.set_visible(true);
                    return true;
                }
                else {
                    node.set_visible(false);
                    return false;
                }
            }
     
        </script>
        <div>
     
            <telerik:RadTextBox ClientEvents-OnLoad="clientLoad" ID="RadTextBox1" runat="server"/>
            <telerik:RadTreeView ID="RadTreeView1" runat="server">
            </telerik:RadTreeView>
     
        </div>
        </form>
    </body>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadTreeView1.LoadContentFile("~/Xml/Tree.xml");
        }
    }

    Tree.xml:
    <?xml version="1.0" encoding="utf-8" ?>
    <Tree>
        <Node Text="Desktop" Expanded="True" ToolTip="Desktop">
            <Node Text="Administrator" Expanded="True">
                <Node Text="AppData" >
                    <Node Text="Microsoft" />
                </Node>
                <Node Text="Contacts" />
                <Node Text="Downloads" />
                <Node Text="Documents" />
                <Node Text="Favorites" >
                    <Node Text="Links" />
                </Node>
                <Node Text="Music" />
                <Node Text="Pictures" />
                <Node Text="Saved Games" />
                <Node Text="Searches" >
                    <Node Text="History" />
                </Node>
                <Node Text="Videos" />
            </Node>
            <Node Text="Computer" ToolTip="My Computer" Expanded="True" >
                <Node Text="WebServer (\\10.0.0.80) (W:)" />
                <Node Text="Local Disk (C:)" Expanded="True" >
                    <Node Text="inetpub" Expanded="True">
                        <Node Text="AdminScripts"></Node>
                    </Node>
                </Node>
                <Node Text="Local Disk (D:)" Expanded="True" >
                    <Node Text="Movies" />
                    <Node Text="Music" />
                    <Node Text="Games" />
                </Node>
            </Node>
        </Node>
    </Tree>
    Attached files

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET and ASP.NET AJAX > TreeView > TreeView Filtering