RadtreeView ScrollIntoView

[AratiS]

Hi,

I have a RadTreeView inside a RadPane, I am setting the radtreeview height and width to that of radpane on radsplitters OnClientLoad and OnClientResized events (see code below). I have a search functionality to search a root node on the page and want to use the ScrollIntoView method of Radtreeview to scroll to the searched node but I am unable to see the scrollbar when I set the radtreeview height this way, Please let me know how can i use ScrollIntoView in this scenario.

<telerik:RadPane ID="LeftTreePane" runat="server" Width="300" Scrolling="Y" CssClass="treePaneStyle" BackColor="#93C9C3">
 <telerik:RadSplitter ID="LeftSplitter" runat="server" Orientation="Horizontal" OnClientLoad="ResizeTreeView" OnClientResized="ResizeTreeView">
    <telerik:RadPane ID="SearchPane" runat="server" Scrolling="Y" Height="70">
    <asp:Panel ID="EleSearchPanel" runat="server" CssClass="searchPanelStyle">
    <asp:Label ID="searchLabel" runat="server" Text="Search:" Width="40px"></asp:Label>
    <telerik:RadTextBox ID="SearchText" runat="server"></telerik:RadTextBox>

    <telerik:RadButton ID="SearchBtn" runat="server" AutoPostBack="true" Text="Search" Width="40px" OnClientClicking="selectNode"></telerik:RadButton>

    </asp:Panel>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="leftSplitBar" runat="server" CollapseMode="None">
    </telerik:RadSplitBar>
    <telerik:RadPane ID="TreePane" runat="server" Scrolling="None">

    <telerik:RadTreeView runat="server" ID="ElementTreeView" OnNodeExpand="ElementTreeView_NodeExpand" OnNodeClick="ElementTreeView_NodeClick" OnContextMenuItemClick="ElementTreeView_ContextMenuItemClick" CssClass="radtreeStyle">

                 <ContextMenus>
                <telerik:RadTreeViewContextMenu ID="ElementCM" runat="server" >
                <Items>

                </Items>
                </telerik:RadTreeViewContextMenu>
                 <telerik:RadTreeViewContextMenu ID="COCM" runat="server">
                <Items>
</Items>
                </telerik:RadTreeViewContextMenu>

                </ContextMenus>
    </telerik:RadTreeView>

    </telerik:RadPane>
    </telerik:RadSplitter>
</telerik:RadPane>

function ResizeTreeView(splitter, args) {
            var pane = $find("<%= LeftTreePane.ClientID %>");
            var width = pane.get_width();
            var treepane = $find("<%= TreePane.ClientID %>");
            var height = treepane.get_height();
            var treeview = $find("<%= ElementTreeView.ClientID %>");
            treeview.width = width + "px";
            treeview.height = height + "px";
        }

 function selectNode(sender, args) {
            var treeView = $find("<%= ElementTreeView.ClientID %>");
            var searchTBox = $find("<%= SearchText.ClientID %>");

            var searchtext = searchTBox._text;
            var node = treeView.findNodeByText(searchtext);
            if (node) {
                var menu = node.get_contextMenuID();
                if (menu == 'COCM') {
                    node.set_selected(true);
                    //node.expand();
                    scrollToNode(treeView, node);
                    args.set_cancel(true);
                }
                else {
                    alert(searchtext + "' could not be found.");
                }
            }
            else {
                alert(searchtext + "' could not be found.");
            }
        }

Not sure if it matters but I am using load on demand to load the nodes.

Thanks,
Arati

[Boyan Dimitrov]

Hello Arati,

Indeed it matters that you are using load on demand, since such functionality will work on the client-side and will search for a specific node through the already loaded nodes. Please find attached a sample project that implements very similar scenario based on your markup code -  when you click on the button below the RadSplitter control the RadTreeView will scroll to the node with text "Node22" for testing purposes.


Kind regards,
Boyan Dimitrov
the Telerik team

[AratiS]

Your code worked. Appreciate your help.
Thank you.