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

    Posted 3 days and 19 hours ago 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 3 days and 13 hours ago in reply to Peter Milchev Link to this post

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