Scroll to selected node in RadTreeView

5 posts, 0 answers
  1. eugen100
    eugen100 avatar
    34 posts
    Member since:
    Mar 2007

    Posted 31 Oct 2011 Link to this post

    Hello,
    I have a RadTreeView with several levels of nodes. I define a name of a node and after click on a button I need to show a node with this name. I know how select the node and expand parent nodes but I do not succeed to scroll to the selected node . I checked many examples by Google and in this forum but all they do not work. Particularly, example from Help does not work:
    function ScrollNode()
    {
       var tree = $find("<%= RadTreeView1.ClientID %>");
       var node = tree.findNodeByText("My Node");
       if(node)
       {
           node.scrollIntoView();
       }


    So I really need a working example of this operation (preferably, in the client side).
    Evgeny
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 01 Nov 2011 Link to this post

    Hello eugen100,

    If your RadTreeView doesn't implement scrolling (meaning you don't have a height set on it) this method will not work. In my experience it only works when you have a height set on the RadTreeView to create the scrollbars. If you don't want to set a height on your RadTreeView, you can use this method from the Telerik static client library. Like so:

    function ScrollNode()
    {
       var tree = $find("<%= RadTreeView1.ClientID %>");
       var node = tree.findNodeByText("My Node");
       if(node)
       {
           $telerik.scrollIntoView(node.get_element());
       }
    }  

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. eugen100
    eugen100 avatar
    34 posts
    Member since:
    Mar 2007

    Posted 02 Nov 2011 Link to this post

    Hello, Kevin
    Thank you for your answer. You are right - I didn't added Height to RadTreeView. Now I added this property and also I call

    selectedNode.scrollIntoView()

    with delay (using setTimeout). In this case it really scrolls to the selected node. But without delay it does not work. Also method you suggested ($telerik.scrollIntoView(node.get_element()); ) does not work  without Height. In any case thank you
    Evgeny
  5. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 03 Nov 2011 Link to this post

    Hello Eugen100,

    You can also refer to this help topic where the same functionality is explained. As for the scrollIntoView event it is expected that it doesn't work when the Height property is not set because there is no scroll area at all.

    Hope this will be helpful.

    Regards,
    Plamen Zdravkov
    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
  6. Amir
    Amir avatar
    15 posts
    Member since:
    Sep 2006

    Posted 21 May Link to this post

    Hi,

    I solved the problem using the code below (using jQuery):

    function ScrollNode()
    {
       var tree = $find("<%= RadTreeView1.ClientID %>");
       var node = tree.findNodeByText("My Node");
       if(node)
       {
           $('html, body').animate({
                        scrollTop: node.get_element().offsetTop
                    }, 2000);
       }
    }

    I hope it may help
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017