RadtreeView ScrollIntoView

3 posts, 1 answers
  1. AratiS
    AratiS avatar
    18 posts
    Member since:
    Jun 2012

    Posted 23 Apr 2013 Link to this post

    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
  2. Answer
    Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 26 Apr 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. AratiS
    AratiS avatar
    18 posts
    Member since:
    Jun 2012

    Posted 26 Apr 2013 Link to this post

    Your code worked. Appreciate your help.
    Thank you.
Back to Top