Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1147
WebTree Client Side Search
posted

Hi,
  How one can search a tree and highlight the searched Item in a webtree using javascript?

Thanks

 

 

  • 28464
    posted

    Hello,

    You can use the client-side object model of the treeview (CSOM) and the getNodes method in particular (getNodes(true) mean recursive search) to obtain all nodes in the tree. Then implementing a FindNodeByText() method, finding a node and selecting it  will look something like this

    <ignav:UltraWebTree ID="UltraWebTree1" runat="server" DefaultImage=""
            HiliteClass="" HoverClass="" Indentation="20">
            <ClientSideEvents NodeClick="nodeClickHandler" />       
            <Levels>
                <ignav:Level Index="0" />
            </Levels>
            <Nodes>
                <ignav:Node Text="Root Node">
                    <Nodes>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                    </Nodes>
                </ignav:Node>
                <ignav:Node Text="Root Node">
                    <Nodes>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                        <ignav:Node Text="NY">
                        </ignav:Node>
                    </Nodes>
                </ignav:Node>
                <ignav:Node Text="Root Node">
                    <Nodes>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                        <ignav:Node Text="Child Node">
                        </ignav:Node>
                    </Nodes>
                </ignav:Node>
            </Nodes>
        </ignav:UltraWebTree>
       
        <script language="javascript">

        
            function FindNodeByText(tree, text) {
                var nodes = tree.getNodes(true);
                for (var i = 0; i < nodes.length; i++)
                {
                    if (nodes[i].getText() == text)
                    {
                        return nodes[i];
                    }
                }           
            }

            function selectNY() {
                var tree = igtree_getTreeById("<%= UltraWebTree1.ClientID %>");
                var node = FindNodeByText(tree, "NY");
                if (node != null)
                {
                    tree.setSelectedNode(node);
                }
            }
       
        </script>
       
        <input type="button" onclick="selectNY()" id="Button1" value="Select NY" />
        

    More info on that can be found in the online help located here: (CSOM section)

    http://help.infragistics.com/NetAdvantage/NET/2008.2/CLR2.0/