Scroll to Specific PanelItem

3 posts, 0 answers
  1. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 May 2009 Link to this post

    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:
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <br /> 
            <br /> 
            <telerik:RadPanelBar ID="RadPanelBar1" Height="180px" ExpandMode="FullExpandedItem" runat="server" Skin="Vista">  
                <Items> 
                 <telerik:RadPanelItem Text="ASP.NET controls" runat="server">  
                <Items> 
                    <telerik:RadPanelItem Text="RadComboBox" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadMenu" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadTabStrip" runat="server">  
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadPanelBar" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadTreeView" runat="server">  
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadToolBar" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadChart" runat="server">  
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelItem> 
            <telerik:RadPanelItem Text="WinForms controls" runat="server">  
                <Items> 
                    <telerik:RadPanelItem Text="RadComboBox (Win)" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadDock" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadGridView" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="RadTabStrip (Win)" runat="server" > 
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelItem> 
            <telerik:RadPanelItem Text="Other projects" runat="server">  
                <Items> 
                    <telerik:RadPanelItem Text="SiteFinity" runat="server" > 
                    </telerik:RadPanelItem> 
                    <telerik:RadPanelItem Text="Reporting" runat="server" >                  
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelItem> 
                </Items>   
            </telerik:RadPanelBar> 
              
           <br />Scroll to Panel Item <br /> 
              
               
                <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Vista">  
                   <Items> 
                    <telerik:RadComboBoxItem Text="RadComboBox" /> 
                    <telerik:RadComboBoxItem Text="RadMenu" /> 
                    <telerik:RadComboBoxItem Text="RadTabStrip" /> 
                    <telerik:RadComboBoxItem Text="RadPanelBar" /> 
                    <telerik:RadComboBoxItem Text="RadTreeView" /> 
                    <telerik:RadComboBoxItem Text="RadToolBar" /> 
                    <telerik:RadComboBoxItem Text="RadChart" /> 
                    <telerik:RadComboBoxItem Text="RadComboBox (Win)" /> 
                    <telerik:RadComboBoxItem Text="RadDock" /> 
                    <telerik:RadComboBoxItem Text="RadGridView" />              
                    <telerik:RadComboBoxItem Text="RadTabStrip (Win)" /> 
                    <telerik:RadComboBoxItem Text="SiteFinity" /> 
                    <telerik:RadComboBoxItem Text="Reporting" /> 
                </Items>    
                </telerik:RadComboBox> 
                input id="Button1" type="button" value="Search" onclick="FocusItem();" /> 

    JavaScript:
     
    <script type="text/javascript">    
    function FocusItem(sender,e)    
    {  
        var combo = $find("<%= RadComboBox1.ClientID %>");  
        var searchItem = combo.get_text();         
        var panelbar1 = $find('<%=RadPanelBar1.ClientID %>');      
        var myitem = panelbar1.findItemByText(searchItem);  
        if(myitem)   
        {  
            if(myitem.get_level() != 0)  
            {  
                var parentItem = myitem;  
                  
                for(var i = 0; parentItem.get_level() >0; i++)  
                {  
                    parentItem = parentItem.get_parent();  
                    parentItem.set_expanded(true);                      
                }                  
            }  
            myitem.get_linkElement().scrollIntoView();   
            myitem.select();  
        }  
    }   
    </script>  

    Thanks,
    Princy.
  2. Alex
    Alex avatar
    32 posts
    Member since:
    May 2012

    Posted 28 Mar 2013 Link to this post

    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 "
    var panel = $find("<%= radPanelBarNavigation.ClientID %>");

    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>
  3. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 02 Apr 2013 Link to this post

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