RadPanelBar Scrolling to Selected Item

7 posts, 0 answers
  1. Lindsay Miller
    Lindsay Miller avatar
    12 posts
    Member since:
    Apr 2010

    Posted 15 Jul 2011 Link to this post

    I have an ascx control that is inside of another aspx page.  This ascx control has a RadPanelBar with two items, the first of which is a RadTreeView.  Currently we have more than 50 nodes in our RadTreeView with child node under each one.  If we select a node near the bottom of the tree view, the page refreshes during the post back and the selected item is out of view.  Is there code available to keep the selected node in a RadTreeView visible when it is inside of a RadPanelBar?

    I have included some of the code from our ascx file showing the RadPanelBar and RadTreeView.


    <telerik:RadPanelBar ID="NavigationPanel" runat="server" Width="100%">
        <Items>
            <telerik:RadPanelItem Expanded="true" ImageUrl="../Images/process24.gif">
                <Items>
                    <telerik:RadPanelItem>
                        <ItemTemplate>
                            <telerik:RadTreeView ID="ProcessTree" runat="server" ShowLineImages="false" OnNodeExpand="ProcessTree_NodeExpand"
                                OnClientContextMenuItemClicking="ProcessContextItemClicking" OnNodeEdit="ProcessTree_NodeEdit"
                                OnClientNodeClicking="ProcessNodeClicking" OnContextMenuItemClick="ProcessTreeContextMenuItemClick"
                                OnClientContextMenuShowing="ProcessContextMenuShowing" OnClientNodeEditStart="OnClientNodeEditStartHandler"
                                OnPreRender="RadTreeView_PreRender" >
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 20 Jul 2011 Link to this post

    Hi Lindsay,

    There is a very useful client-side method of the RadTreeNode - scrollIntoView which you could use. So in order achieve the desired functionality you should get a reference to the RadTreeView , find the selected node and call this method after  post-back.

    All the best,
    Dimitar Terziev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lindsay Miller
    Lindsay Miller avatar
    12 posts
    Member since:
    Apr 2010

    Posted 20 Jul 2011 Link to this post

    Hi Dimitar,

    Thank you for getting back to me.  I think I tried this already and it did not work.  I tried a few different scrolling suggestions from the forum.  The RadTreeView does not have a scroll bar and it didn't make the RadPanelBar scroll either.  I will try again and let you know.

    Thanks,
    Lindsay
  5. Lindsay Miller
    Lindsay Miller avatar
    12 posts
    Member since:
    Apr 2010

    Posted 20 Jul 2011 Link to this post


    Hi Dimitar,

    I read the link you attached to your reply and found this:

    scrollIntoView none none Causes the Node to scroll into view, aligning the Node to the bottom of the TreeView area. This function repositions the TreeView's scrollbars, not the scrollbars for the page itself.

    This is the issue I am having.  The RadTreeView does not have a scroll bar and it is inside of a RadPanelBar that does have a scroll bar.  Is there a method to make the RadPanelBar scroll to the location of the selected RadTreeView node?  I have not found one that will scroll the RadPanelBar yet.  Any suggestions would be greatly appreciated.

    Thank you!
    Lindsay
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 22 Jul 2011 Link to this post

    Hello Lindsay,

    You are right about the scrollIntoView method, please pardon me for missing this detail in your scenario.

    Please add the following property MaintainScrollPositionOnPostback="true" to your page directive at the top of the page.
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" MaintainScrollPositionOnPostback="true" %>

    I hope this would help you out.

    Best wishes,
    Dimitar Terziev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  7. Alex
    Alex avatar
    32 posts
    Member since:
    May 2012

    Posted 09 Apr 2013 Link to this post

    Hi Lindsay,

    Have you fixed this scrolling tree view node in RadPanel bar? I have met the same issue too. Could you share your codes with me? Thanks.

    Alex
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Apr 2013 Link to this post

    Hello Alex,

    In general when you have a RadPanelBar control with many items in it by setting MaintainScrollPositionOnPostback="true" to your page directive you should be able to maintain the scroll position of the selected item when a post back of the page occurs. Attached to this post you can find a short video demonstrating the described behavior as well the page that I used for testing.

    Greetings,
    Kate
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017