RadPanelBar Scrolling to Selected Item

[Lindsay Miller]

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" >

[Dimitar Terziev]

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

[Lindsay Miller]

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

[Lindsay Miller]

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

[Dimitar Terziev]

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

[Alex]

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

[Kate]

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