PanelBar Tabindex does not work

[Shubhada]

I have multiple PanelBars that are placed on a form in a sequence..The Tab key does not take me from first panelbar to the next one..My code is as follows..

So when I press Tab key down, it does select the first one (radPnlBarFundingSources), but not the second one (radPnlBarContracts) after tabbing from first one 

Please help!

   <div class="Row">
        <telerik:RadPanelBar runat="server" ID="radPnlBarFundingSources" Width="100%" TabIndex="1">
            <Items>
                <telerik:RadPanelItem runat="server" Text="Funding Source">
                    <ContentTemplate>
                        <telerik:RadListBox runat="server" ID="radLbAvailFundingSource" Height="100px" Width="40%" SelectionMode="Multiple" AllowTransfer="true" TransferMode="Move" AllowTransferOnDoubleClick="true" TransferToID="radLbSelFundingSource" ButtonSettings-AreaWidth="35px" Enabled="True" style="font-family: Verdana, Trebuchet MS,Arial,sans-serif; font-size:0.9em;"></telerik:RadListBox>
                        <telerik:RadListBox runat="server" ID="radLbSelFundingSource" Height="100px" Width="40%"></telerik:RadListBox>
                    </ContentTemplate>
                </telerik:RadPanelItem>
            </Items>
        </telerik:RadPanelBar> 
    </div>
    <div class="Row">
        <telerik:RadPanelBar runat="server" ID="radPnlBarContracts" Width="100%" TabIndex="2">
            <Items>
                 <telerik:RadPanelItem runat="server" Text="Contract">
                    <ContentTemplate>
                        <telerik:RadListBox runat="server" ID="radLbAvailContract" Height="100px" Width="40%" SelectionMode="Multiple" AllowTransfer="true" AllowTransferOnDoubleClick="true" TransferToID="radLbSelContract"  AutButtonSettings-AreaWidth="35px"></telerik:RadListBox>
                        <telerik:RadListBox runat="server" ID="radLbSelContract" Height="100px" Width="40%"></telerik:RadListBox>
                    </ContentTemplate> 
                 </telerik:RadPanelItem> 
            </Items>
        </telerik:RadPanelBar>
    </div>

[Phil]

I wonder if this has been resolved?  I'm having the same problem.

[Peter Milchev]

Hello Shubhada and Phil,

This behavior is by design when there is a Template. Here is the code that is executed when the Tab key is pressed.

case key.tab:
               if (e.target === this.get_element()) {
                   return item._moveToNextFocusable(e);
               }
               return true;

_moveToNextFocusable: function (e) {
    var $focusableElements;
    var $template;
    var hasTemplate = this.get_templated() || (this.get_hasContentTemplate() && this.get_expanded());

    if (hasTemplate && this.get_focused()) {
        $template = $(this.get_element()).find(".rpTemplate");
        $focusableElements = $template.find("input,a,button,select,textarea");
        $focusableElements.eq(0).focus();
        e.preventDefault();
        return false;
    }

    return true;
}

When the items have no template, the Tab key will move the focus from the first to the second PanelBar.

Regards,
Peter Milchev
Progress Telerik

[Phil]

Thanks so much, Peter.  I'll look into this!