RadListBox Checkbox TabIndex Issue

7 posts, 0 answers
  1. Troy
    Troy avatar
    4 posts
    Member since:
    Sep 2013

    Posted 23 Sep 2013 Link to this post

    Hi,

    I am using a RadListBox with CheckBoxes="True" within a RadGrid, meaning that it is replicated a number of times. Due to the size of the list, and the amount of times it is shown on the page, I donot want each item to be included in the tab order.

    I have tried setting the RadListBox tabindex to -1, as well as each item's tabindex to -1 in ItemDataBound, but navigating using tab still traverses the list for each row. What I can only assume is that each checkbox populated in the list when CheckBoxes is set to true, is given a number in the tab order. Is there a way to set the checkboxes tabindex so that this is no longer an issue?

    Regards

    Troy
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 26 Sep 2013 Link to this post

    Hello Troy,

    The reason for the faced issue is that the CheckBox is an input element and setting the TabIndex of the Control or even on the Items of the RadListBox, you could not prevent tabbing trough the checkboxes. However, I would suggest you to implement the following workaround, using JQuery - you could find all checkboxes and set explicitly their TabIndex (using the OnClientLoad client-side event of the RadListBox) :
    <script type="text/javascript">
     
            function OnClientLoad(sender) {
                $telerik.$(".rlbList").find(".rlbCheck").attr("tabindex", "-1");
            }
     
        </script>


    Regards,
    Nencho
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Troy
    Troy avatar
    4 posts
    Member since:
    Sep 2013

    Posted 26 Sep 2013 Link to this post

    Thanks Nencho - that works well.
  5. Troy
    Troy avatar
    4 posts
    Member since:
    Sep 2013

    Posted 01 Oct 2013 Link to this post

    Hi Nencho,

    We think we may have found a bug with the RadListBox - Just found that entered data would be lost on postback using the posted solution. This would only be data entered into telerik controls, as asp controls retained their values. Fortunately one of our pages worked correctly and we could see the differences in the page to resolve the issue.

    Adding TabIndex="-1" to the RadListBox now allows the telerik controls to retain data on Postback.

    Regards

    Troy
  6. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 03 Oct 2013 Link to this post

    Hello Troy,

    I tried to replicate the described issue, but to no avail. Here is a video, demonstrating the behavior at my end. Please let me know if I am missing anything, in order to replicate the problem locally. In addition, would you specify what solution you had implemented, troubleshooting the issue at your side?

    Regards,
    Nencho
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  7. Troy
    Troy avatar
    4 posts
    Member since:
    Sep 2013

    Posted 03 Oct 2013 Link to this post

    Hi,

    Using the javaScript you provided below, try with:

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" />

    <telerik:RadAjaxPanel ID="rapGr" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

        <telerik:RadTextBox ID="txtBoxOne" runat="server" />

        <telerik:RadListBox ID="rList" runat="server" CheckBoxes="True" OnClientLoad="OnClientLoad"

            Width="200px" AutoPostBack="true" style="top: 0px; left: 0px">

            <Items>

                <telerik:RadListBoxItem Text="1" Value="1" />

                <telerik:RadListBoxItem Text="2" Value="3" />

                <telerik:RadListBoxItem Text="3" Value="3" />

                <telerik:RadListBoxItem Text="4" Value="4" />
                <telerik:RadListBoxItem Text="5" Value="5" />

            </Items>

        </telerik:RadListBox>
    </telerik:RadAjaxPanel>

    This should cause (most of the time) the data in txtBoxOne to disappear when using the list box. Adding tabindex="-1" to the list box stops this happening.

    Troy

  8. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 08 Oct 2013 Link to this post

    Hello Troy,

    Unfortunately, I am still unable to replicate the described issue. Would you specify the version of our controls that you are currently using and under which browser you are encountering the issue? In addition, here is a video, demonstrating the tests I had performed, base on the provided code snippet. Would you also record a video, demonstrating the problematic behavior at your end?

    Regards,
    Nencho
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017