PanelBar scrolling to specific PanelItem

2 posts, 0 answers
  1. Rhyss
    Rhyss avatar
    60 posts
    Member since:
    Jan 2007

    Posted 22 May 2009 Link to this post

    Hi All,

    what i am trying to do is have a PanelBar that can extend beyond the bounds of it's container so that scroll bars will be used.  What i want to be able to do is via a click even on client side i want the PanelBar to scroll to a specific PanelItem.  I have tried focus but it doesn't seem to change the scroll at all.  It also needs to open the relevant PanelItem as well.

    Any ideas?
    thanks
    Jordan
  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 May 2009 Link to this post

    Hi Jordan,

    Try out the following client side code for scrollling to particular item in RadPanelBar. Have a look at the code that I tried. Hope this helps :).

    ASPX:
     
    <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="Vista" Height="150px" ExpandMode="FullExpandedItem">     
        <Items>    
            <telerik:RadPanelItem Expanded="True" Text="ASP.NET controls">     
                <Items>    
                    <telerik:RadPanelItem Text="RadComboBox" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadMenu" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadTabStrip">     
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadPanelBar" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadTreeView">     
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadToolBar" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadChart">     
                    </telerik:RadPanelItem>    
                </Items>    
            </telerik:RadPanelItem>    
            <telerik:RadPanelItem Text="WinForms controls">     
                <Items>    
                    <telerik:RadPanelItem Text="RadComboBox" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadDock" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadGridView" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="RadTabStrip" >    
                    </telerik:RadPanelItem>    
                </Items>    
            </telerik:RadPanelItem>    
            <telerik:RadPanelItem Text="Other projects">     
                <Items>    
                    <telerik:RadPanelItem Text="SiteFinity" >    
                    </telerik:RadPanelItem>    
                    <telerik:RadPanelItem Text="Reporting" >    
                    </telerik:RadPanelItem>    
                </Items>    
            </telerik:RadPanelItem>    
        </Items>    
    </telerik:RadPanelBar>    
    <input id="Button1" type="button" value="button" onclick="FocusItem();" /> 

    JavaScript:
     
    <script type="text/javascript">    
        function FocusItem(sender,e)    
        {  
            var panelbar1 = $find('<%=RadPanelBar1.ClientID %>');      
            var myitem = panelbar1.findItemByText('RadTabStrip'); // Search item by text  
            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(true);   
            }  
        }   
    </script>  

    -Princy.
Back to Top