This is a migrated thread and some comments may be shown as answers.

Tab skips checkboxes in add/edit popups

2 Answers 88 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Luke asked on 03 Jul 2013, 11:10 PM

I have grids utilizing FormTemplates for adding and editing grid data. Normally we are able to tab through the controls after bringing up the modal, but for some reason checkboxes are always skipped. We would really rather not manually set tab indexes on every control in every edit template in every grid in our application. Is there some straightforward way to fix this?

Here's an example form template used for an edit modal:

<EditFormSettings

CaptionFormatString="Edit Phone Number"

InsertCaption="Add New Phone Number"

EditFormType="Template">

<FormTemplate>

<table id="phoneEditForm"

cellspacing="1"

cellpadding="1"

width="100%">

<tr>

<td>

<des:LocalizableLabel

ID="phoneTypeLabel"

runat="server"

Text="Type">

</des:LocalizableLabel>

</td>

<td>

<aec:TelerikDropDown

ID="phoneTypeDdl"

runat="server"

SelectedValue='<%# Bind("Telephone_Type_Desc") %>'

DataSourceID="sqlPhoneTypeLookupList"

DataTextField="Telephone_Type_Desc"

DataValueField="Telephone_Type_Desc"

DefiningLabelID="phoneTypeLabel"

Purpose="Required"

Width="150px">

</aec:TelerikDropDown>

</td>

</tr>

<tr>

<td>

<des:LocalizableLabel

ID="phoneNumberLabel"

runat="server"

Text="Number*">

</des:LocalizableLabel>

</td>

<td>

<aec:TelerikMaskedTextBox

ID="phoneNumber"

runat="server"

TextWithLiterals='<%# Bind("Number") %>'

Mask="(###) ###-####"

DefiningLabelID="phoneNumberLabel"

MaxLength="10">

</aec:TelerikMaskedTextBox>

<asp:RequiredFieldValidator

ID="phoneValidator"

runat="server"

ControlToValidate="phoneNumber"

ErrorMessage="Number is required."

Display="None ">

</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td>

<des:LocalizableLabel

ID="primaryLabel"

runat="server"

Text="Primary">

</des:LocalizableLabel>

</td><td>

<aec:TelerikCheckBox

ID="primaryCheckBox"

runat="server"

Checked='<%# Bind("Is_Primary_Number_Flag") %>'

DefiningLabelID="primaryLabel">

</aec:TelerikCheckBox>

</td>

</tr>

<tr>

<td>

<des:LocalizableLabel

ID="extensionLabel"

runat="server"

Text="Extension">

</des:LocalizableLabel>

</td>

<td>

<aec:TelerikTextBox

ID="extension"

runat="server"

Text='<%# Bind("Extension") %>'

DefiningLabelID="extensionLabel"

MaxLength="4">

</aec:TelerikTextBox>

</td>

</tr>

<tr>

<td>

<des:LocalizableLabel

ID="phoneNoteLabel"

runat="server"

Text="Note">

</des:LocalizableLabel>

</td>

<td>

<aec:TelerikTextBox

ID="phoneNote"

runat="server"

Text='<%# Bind("Note") %>'

DefiningLabelID="phoneNoteLabel"

TextMode="MultiLine"

Width="300px"

Height="120px">

</aec:TelerikTextBox>

</td>

</tr>

</table>

<AERadGrid:EditFormSaveCancelButtons

ID="phoneNumbersEditFormButtons"

runat="Server">

</AERadGrid:EditFormSaveCancelButtons>

</FormTemplate>

</EditFormSettings>

2 Answers, 1 is accepted

answered on 08 Jul 2013, 10:22 AM

Hi Luke,

Could you please add the same controls directly in the page and not in the RadGrid EditForm and verify if the same behavior appear. I suppose the issue is not directly related to our RadGrid control but is mostly browser or OS related. Please provide some more information of the environment in which the issue appear so that we could further test your case and isolate the issue if it is cause by the RadGrid control.

Regards,
Maria Ilieva
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.