如何使用 asp.net 网络表单在 telerik 树中实现搜索和过滤

Question

我是 telerik.I 的新手，想过滤 telerik:red 树数据，但无法在收件箱中触发。我的代码是-

<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>

请帮忙。

Answer 1

我最终重写了大部分代码，如果有人感兴趣，我会把它贴在这里。我的最终结果看起来像这样并且效果很好。

这会在按键时进行过滤，并在清除过滤器文本框时恢复树。它还会展开并选择所有匹配的节点。它并不花哨，我相信可以重写它以使其更有效。

    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

如何使用 asp.net 网络表单在 telerik 树中实现搜索和过滤

How to implement Search and fillter in telerik tree using asp.net web form

javascript

c#

asp.net

telerik