I am new in telerik.I want to filter telerik:red tree Data but not able to fire on inbox. My Code is-

<telerik:RadPane ID="LeftPanelAssigned" runat="server" Width="20%" CssClass="management" OnClientBeforeResize="LeftPanelAssigned_OnClientBeforeResize">
                  <asp:Label ID="RadTextBox2" Text="Assigned" runat="server" />
                <asp:Label ID="txtAssinedcount" ReadOnly="true" runat="server" />

                 <asp:TextBox ID="txtSearch" runat="server" onkeyup="SearchEmployees(this, '#TreeAssignedWorkflow');"     placeholder="Search employee">
                </asp:TextBox>


                <telerik:RadTreeView ID="TreeAssignedWorkflow" runat="server" CssClass="tree" OnNodeClick="TreeAssignedWorkflow_NodeClick"
                    OnClientMouseOver="TreeAssignedWorkflowOnClientMouseOver" OnClientMouseOut="TreeAssignedWorkflowOnClientMouseOut"
                    OnClientContextMenuItemClicked="WFTreeContextMenuClick">
                    <ContextMenus>
                        <telerik:RadTreeViewContextMenu ID="RadTreeViewContextMenu1" runat="server">
                            <Items>
                                <telerik:RadMenuItem Text="Reference Search">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Sort By Date">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Sort By Type">
                                </telerik:RadMenuItem>
                            </Items>
                            <CollapseAnimation Type="none" />
                        </telerik:RadTreeViewContextMenu>
                    </ContextMenus>
                </telerik:RadTreeView>
            </telerik:RadPane>

Please help.

CodePudding user response：

I ended up rewriting most of the code and im posting it here if anyone is interrested. My final result looks like this and works good.

This filters on keypress and restore the tree when clearing the filter textbox. It also expands and selects all nodes that are a match. Its not fancy and Im sure it can be rewritten to be more effective.

    var selectednode;
        function valueChanging(sender, args) {
            var tree = $find("<%= RadTreeView_Organisation.ClientID %>");
            var textbox = document.getElementById("<%= Filter.ClientID %>");
            //alert(textbox.value);
            var searchString = textbox.value;
            if (searchString == "") {
                ClearFilter();
            }
            else {
                var allNodes = tree.get_allNodes();
                var index;
                for (index = 0; index < allNodes.length; index  ) {
                    var node = allNodes[index];
                    node.set_selected(false);
                }

                for (index = 0; index < allNodes.length; index  ) {
                    var node = allNodes[index];
                    if (node.get_expanded)
                        node.collapse();
                }

                LoopIt(searchString, tree, textbox);
                expandit();
            }
            return false;
        }
            function ClearFilter() {
                var tree = $find("<%= RadTreeView_Organisation.ClientID %>");
                var textbox = $find("<%= Filter.ClientID %>");
                var allNodes = tree.get_allNodes();
                for (index = 0; index < allNodes.length; index  ) {
                    var node = allNodes[index];
                    node.set_visible(true);
                    node.set_selected(false);
                    if (node.get_expanded)
                        node.collapse();
                }
                setTimeout(allNodes[0].expand(), 450); 
                return false;
            }
            function LoopIt(searchString, tree, textbox) {
                var allNodes = tree.get_allNodes();
                allNodes[0].expand;
                for (var i = 0; i < tree.get_nodes().get_count() ; i  ) {           
                    findNodes(tree.get_nodes().getNode(i), searchString);
                }
            }
            function expandit() {
                if (selectednode != null) {
                    selectednode = selectednode.get_parent();
        
                    while (selectednode != null) {
                        //  selectednode.set_selected(true);
                        if (selectednode.expand) {
                            selectednode.expand();
                        }
        
                        selectednode = selectednode.get_parent();
                    }
                }
            }
        
            function findNodes(node, searchString) {
                var hasFoundChildren = false;
        
                if (hasFoundChildren || node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) {
                    node.set_selected(true);
                }
        
                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);
        
                    node.expand();
                    if (node.get_text().toLowerCase().indexOf(searchString.toLowerCase()) != -1) {
                        node.set_selected(true);
                        for (var i = 0; i < node.get_nodes().get_count() ; i  ) {
                            DisplayChildren(node);
                            //node.get_nodes().getNode(i).set_visible(true);
                        }
                    }
                    return true;
                }
                else {
                    node.set_visible(false);
                    return false;
                }
            }
        
            function DisplayChildren(node) {
                for (var ee = 0; ee < node.get_nodes().get_count() ; ee  ) {
                    node.get_nodes().getNode(ee).set_visible(true);
                    //node.get_nodes().getNode(ee).set_expanded(true);
                    DisplayChildren(node.get_nodes().getNode(ee));
                }
            }
            //end Treeviewfilter