PanelBar scrolling to specific PanelItem

[Rhyss]

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

[Princy]

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.