RadTreeView node looping

Question

I'm using RadTreeView and it's a wonderful control I have a small problem and I hope you can help me with it I've created a Next button and a search textbox the user enter the preferred search criteria in the Textbox and hit Next.

when he click on Next I search the TreeView and find the first occurrence in the TreeView nodes and make it selected and when he click Next again i want to find the next occurrence of the same node and make it selected.

how can I achieve this thank you :) I want it 2 be client side if possible

here is my code so far :

<script type="text/javascript">
function FindMatchingNodes() {

            var tree = $find("<%=MainTree.ClientID%>");
            var text = document.getElementById("<%=ApplicationSearchResult.ClientID%>").value;
            var allNodes = tree.get_allNodes();

            var array = new Array();
            staticVar();
           for (var i = 0; i < allNodes.length; i++) {
                var node = allNodes[i];
                var itemText = node.get_text();
                var itemValue = node.get_value();

               if (text != "") {
                   if (text == itemText) {
                        array.push(itemValue);
                    }
                }
            }
            if (staticVar.counter >= array.length) { staticVar.counter = 0; }
          var SelectedNode =tree.findNodeByValue(array[staticVar.counter].toString());
            var pNode = SelectedNode.get_parent();
            SelectedNode.select();
            pNode.set_expanded(true);
            SelectedNode.set_expanded(true);
            array = null;

        }

        function staticVar() {
            if (staticVar.counter == undefined) {
                staticVar.counter = 0        
            }
            else {
                staticVar.counter++
            }
        }
</script>

//Markup

  <telerik:RadTreeView ID="MainTree" runat="server" CssClass="NewClass" 
        Skin="Office2010Silver">
    <Nodes>
    <telerik:RadTreeNode Selected="true" Text="Hello"  Value="0">
        <Nodes>
            <telerik:RadTreeNode runat="server" Text="Hi" Value="1">
            </telerik:RadTreeNode>
        </Nodes>
        </telerik:RadTreeNode>
    <telerik:RadTreeNode  Text="Hellooooooooooooo" Value="2">
        <Nodes>
            <telerik:RadTreeNode runat="server" Text="helloooo" Value="3">
            </telerik:RadTreeNode>
        </Nodes>
        </telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Owner="MainTree" Text="Hi" Value="4"></telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Owner="MainTree" Text="Hiiiiiiiiiiiiiii" Value="5"></telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Owner="MainTree" Text="Hello" Value="6" 
            ></telerik:RadTreeNode>
    </Nodes>
    <Nodes>
    <telerik:RadTreeNode  Text="Hi" Value="7"></telerik:RadTreeNode>
    <telerik:RadTreeNode  Text="Hiiiiiiiiiiiiiii" Value="8"></telerik:RadTreeNode>
    <telerik:RadTreeNode  Text="Hello" Value="9"></telerik:RadTreeNode>
    </Nodes>
    </telerik:RadTreeView>
    <table border="0">
    <tr>
    <td><telerik:RadTextBox ID="ApplicationSearchResult" runat="server">
   <ClientEvents OnKeyPress="KeyPress" />
    </telerik:RadTextBox></td>
     <td><img src="next.png" onclick="FindMatchingNodes();" style="cursor:pointer;" runat="server" height="17" width="17" ID="NextNode" /></td>
      </tr>
      </table> 

Answer 1

function findNext() {
     var search = $get("<%= ApplicationSearchResult.ClientID %>").value;

     var treeView = $find("<%= MainTree.ClientID %>");
     var selectedNode = treeView.get_selectedNode();
     var nodes = treeView.get_allNodes();
     var index = selectedNode ? nodes.indexOf(selectedNode) + 1 : 0;
     for (var itemsProcessed = 0; itemsProcessed < nodes.length; ++itemsProcessed, ++index) {
          if (index >= nodes.length)
               index = 0;

          var node = nodes[index];
          if (node.get_text() == search) {
               if (selectedNode) {
                    selectedNode.unselect();
               }
               node.select();
               expandAllAncestors(node);
               return;
          }

     }
}

function expandAllAncestors(node) {
     if (node.get_expanded() !== true)
          node.expand();

     if (node.get_level() != 0) {
          expandAllAncestors(node.get_parent());
     }
}