RadListBox Checkbox TabIndex Issue

[Troy]

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

[Nencho]

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

[Troy]

Thanks Nencho - that works well.

[Troy]

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

[Nencho]

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

[Troy]

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

[Nencho]

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