PanelBar Tabindex does not work

4 posts, 0 answers
  1. Shubhada
    Shubhada avatar
    2 posts
    Member since:
    Mar 2012

    Posted 03 Dec 2017 Link to this post

    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>

  2. Phil
    Phil avatar
    5 posts
    Member since:
    Jun 2016

    Posted 12 Jun in reply to Shubhada Link to this post

    I wonder if this has been resolved?  I'm having the same problem.
  3. Peter Milchev
    Admin
    Peter Milchev avatar
    409 posts

    Posted 15 Jun Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Phil
    Phil avatar
    5 posts
    Member since:
    Jun 2016

    Posted 15 Jun in reply to Peter Milchev Link to this post

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