TreeViewNode display

[mn moule]

Hi Friends,

I have a RadTreeView Control and i use xml datasource binding.
i have a textbox above the treeview control.
When a type a word/node name in the textbox. i want my treeview to be binded only upto that node hierarchy. not its child details.

for ex:
consider a tree having A as parent its direct child is B and Its direct child  be C.
so if i search for B
Tree should only display A and its child B. since B is the node that i searched for.

Examples would be appresiated.

One more thing is . how to set the datasource proiperty for the RadTreeView control in javascript.

[Nikolay Tsenkov]

Hello mn moule,

I have prepared example which I think will be most appropriate for your requirements.
I am not binding the tree accordingly to the searchText, instead I am collapsing the tree and showing only the searched Node (if any).
Here is the markup:

<telerik:RadTextBox runat="server" ID="txtSearch">
    <ClientEvents OnKeyPress="onKeyPress" />
</telerik:RadTextBox>
<telerik:RadTreeView ID="RadTreeView1" runat="server">
    <Nodes>
        <telerik:RadTreeNode Text="Root1">
            <Nodes>
                <telerik:RadTreeNode Text="Child 1.1">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child 1.1.1" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.2">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child 1.2.1" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.3">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child 1.3.1" />
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Root2">
            <Nodes>
                <telerik:RadTreeNode Text="Child 2.1">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child 2.1.1" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.2">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child 2.2.1" />
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.3">
                    <Nodes>
                        <telerik:RadTreeNode Text="Child 2.3.1" />
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

And the javaScript:

function onKeyPress(sender,args) {
    setTimeout(function () {
        var tree=$find('<%= RadTreeView1.ClientID %>')
        var textBox=sender;
        var text=textBox.get_textBoxValue();

        var nodeWithThisText=tree.findNodeByText(text);
        if(nodeWithThisText!='undefined'&&nodeWithThisText!=null) {
            collapseNodesInCollection(tree.get_nodes());

            var parentNode=nodeWithThisText.get_parent();
            for(var i=0;i<nodeWithThisText.get_level();i++) {
                parentNode.set_expanded(true);
                parentNode=parentNode.get_parent();
            }
            setTimeout(function () { nodeWithThisText.set_selected(true); },0);
        }
    },0);
}

function collapseNodesInCollection(children) {
    for(var i=0,count=children.get_count();i<count;i++) {
        var node=children.getNode(i);
        collapseNodesInCollection(node.get_nodes());
        node.set_expanded(false);
    }
}

Hope this is helpful for you!


Regards,
Nikolay Tsenkov
the Telerik team

[mn moule]

Hi Nikolay,
Thanks for your reply. will let u know once implementing it.