Scroll to Specific PanelItem

Requirements
RadControls version	2009.01.0311.35
.NET version	2.0
Visual Studio version	2005
programming language	JavaScript
browser support	all browsers supported by RadControls

PROJECT DESCRIPTION
This project illustrates how to search and scroll to specific panelitem and select the item in client side. It also expands all the parent items. The method scrollIntoView() causes the panelitem to scroll into view, aligning the item to the top of the view area (if possible).
Note: This repositions the PanelBar's scrollbars only, not the scrollbars for the page.

ASPX:

JavaScript:

Thanks,
Princy.

Hi,
I use RadPanelBar with a treeview in it. I have tried to use java script to scroll when doing selection. But I cannot find the "radPanelBarNavigation" control by code "

Could you tell me how to scroll to the selected item both for RadPanelItem and tree view node? I am calling javascript in pageload at server side.

 

Here are my codes for RadPanelBar

<telerik:RadPanelBar runat="server" ID="radPanelBarNavigation" Height="600" ExpandMode="SingleExpandedItem" OnClientItemClicked="OnClientItemClicked" Skin="GS" EnableEmbeddedSkins="false">

           <Items>

               <telerik:RadPanelItem Value="ResourceSchedules">

                   <HeaderTemplate>

                       <span id="containerResourceSchedules" runat="server"><asp:Label ID="labelResource" runat="server"></asp:Label></span>

                       <span onclick="stopPropagation(event)">

                           <asp:HyperLink ID="hyperLinkResourceSchedules" runat="server" />

                       </span>

                       <asp:LinkButton ID="linkButtonAddResource" runat="server" />

                   </HeaderTemplate>

                   <ContentTemplate>

                       <asp:TreeView ID="treeViewResources" runat="server" SkipLinkText=""></asp:TreeView>

                   </ContentTemplate>

               </telerik:RadPanelItem>

               <telerik:RadPanelItem Value="BaseSchedules" >

                   <HeaderTemplate>

                       <span id="containerBaseSchedules" runat="server"><asp:Label ID="labelBaseSchedule" runat="server"></asp:Label></span>                        

                       <span onclick="stopPropagation(event)">

                           <asp:HyperLink ID="hyperLinkBaseSchedules" runat="server" />

                       </span>

                       <asp:LinkButton ID="linkButtonAddBaseSchedule" runat="server" />

                   </HeaderTemplate>

               </telerik:RadPanelItem>

               <telerik:RadPanelItem Value="CalendarSchedules">

                   <HeaderTemplate>

                       <span id="containerCalendarSchedules" runat="server"><asp:Label ID="labelCalendarSchedule" runat="server"></asp:Label></span>

                       <span onclick="stopPropagation(event)">

                           <asp:HyperLink ID="hyperLinkCalendarSchedules" runat="server" />

                       </span>

                       <asp:LinkButton ID="linkButtonAddCalendarSchedule" runat="server" />

                   </HeaderTemplate>

               </telerik:RadPanelItem>

               <telerik:RadPanelItem Value="DownloadSummary"></telerik:RadPanelItem>

               <telerik:RadPanelItem Value="RecentEvents"></telerik:RadPanelItem>

           </Items>

       </telerik:RadPanelBar>

Hi Alex,

In case you use the RadTreeView control you can use the scrollIntoView() client-side property of the control as described in the middle of this help article. Please note also that the CodeLibrary is related to the 2009 version of the Telerik controls and it is very likely that the described approach does not work as expected with the latest version of our controls. in case the above mentioned approach does not help my best suggestion would be to open a support ticket where you can attach a very simplified runnable page that we can test locally and help you out in your particular scenario.

Kind regards,
Kate
the Telerik team