Tab Indexing not working in Grid

Question

![enter image description here][1]In my application, I have used the MVC telerik grid, bounded with input textboxes. While I run the application in Internet Explorer and the Chrome browser, the tab indexing in working fine and control is moving from one textbox to the other. But when using the Firefox browser, the tab indexing is moving from table row to table row and highlighting the complete cell.

Please help me to fix this.

 <div class="appln-cnt-c2">
                <div class="frm-fldrow">
                    <div class="appln-txtrow" style="width: 800px; position: relative; left: 45px;">
                        @{
                            Html.Telerik().Grid(Model.FacultyCompositions)
                               .Name("FacultyComositionGrid")
                               .DataKeys(keys => keys.Add(m => m.FacultyCompositionPK))
                               .ClientEvents(events => events.OnComplete("FacultyComositionGrid_onComplete").OnError("FacultyComositionGrid_onError").OnDelete("OnDelete").OnEdit("OnEdit"))
                               .Columns(columns =>
                               {
                                   columns.Bound(m => m.EthnicityDescription)
                                       .Title("<strong>Ethnicity</strong>").Width(180).Filterable(false).Sortable(false).ReadOnly(true);

                                   columns.Template(@<text>

                            <table cellspacing="0" cellpadding="0">
                                <tr id="data">
                                    <td>

                                        <input type="text" class="FacultyCompositionTextbox"   value="@item.FCYear1Male"   @(Model.ReadOnlyFacultyCompositionNew[0])@(item.DisableCalculatedRow) maxlength="4"  onkeypress="return IsNumeric(event);" />

                                    </td>
                                    <td>

                                        <input class="FacultyCompositionTextbox" type="text"   value="@item.FCYear1Female" @(Model.ReadOnlyFacultyCompositionNew[0]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
                                        <input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK"  />

                                    </td>
                                </tr>
                            </table>

                            </text>)
                                                .HeaderTemplate(
                            @<text>
                            <table cellspacing="0" cellpadding="0">
                                @if (Model.FacultyCompositionColumnHeader[0] != "")
                                {
                                    <tr>
                                        <td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[0]</strong></td>
                                    </tr>
                                    <tr>
                                        <td><span>M</span></td>
                                        <td><span>F</span></td>
                                    </tr>
                                }
                                else
                                {
                                    <tr>
                                        <td colspan="2"><strong></strong></td>
                                    </tr>
                                    <tr>
                                        <td><span></span></td>
                                        <td><span></span></td>
                                    </tr>
                                }
                            </table>
                            </text>).Width(20);
                                   columns.Template(@<text>

                            <table cellspacing="0" cellpadding="0">
                                <tr id="data">
                                    <td>
                                        <input type="text" class="FacultyCompositionTextbox" value="@item.FCYear2Male"   @(Model.ReadOnlyFacultyCompositionNew[1]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />

                                    </td>
                                    <td>
                                        <div style="position: relative;">
                                            <input class="FacultyCompositionTextbox" type="text" value="@item.FCYear2Female" @(Model.ReadOnlyFacultyCompositionNew[1])  @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
                                            <input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK"  />
                                        </div>
                                    </td>
                                </tr>
                            </table>

                            </text>)

                                                .HeaderTemplate(
                            @<text>
                            <table cellspacing="0" cellpadding="0">
                                @if (Model.FacultyCompositionColumnHeader[1] != "")
                                {
                                    <tr>
                                        <td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[1]</strong></td>
                                    </tr>
                                    <tr>
                                        <td><span>M</span></td>
                                        <td><span>F</span></td>
                                    </tr>
                                }
                                else
                                {
                                    <tr>
                                        <td colspan="2"><strong></strong></td>
                                    </tr>
                                    <tr>
                                        <td><span></span></td>
                                        <td><span></span></td>
                                    </tr>
                                }
                            </table>
                            </text>).Width(20);
                                   columns.Template(@<text>
                            <table cellspacing="0" cellpadding="0">
                                <tr id="data">
                                    <td>
                                        <input type="text" class="FacultyCompositionTextbox" value="@item.FCYear3Male"   @(Model.ReadOnlyFacultyCompositionNew[2]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
                                    </td>
                                    <td>
                                        <input class="FacultyCompositionTextbox" type="text" value="@item.FCYear3Female" @(Model.ReadOnlyFacultyCompositionNew[2]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
                                        <input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK" /></td>
                                </tr>
                            </table>
                            </text>)
                                                .HeaderTemplate(
                            @<text>
                            <table cellspacing="0" cellpadding="0">
                                @if (Model.FacultyCompositionColumnHeader[2] != "")
                                {
                                    <tr>
                                        <td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[2]</strong></td>
                                    </tr>
                                    <tr>
                                        <td><span>M</span></td>
                                        <td><span>F</span></td>
                                    </tr>
                                }
                                else
                                {
                                    <tr>
                                        <td colspan="2"><strong></strong></td>
                                    </tr>
                                    <tr>
                                        <td><span></span></td>
                                        <td><span></span></td>
                                    </tr>
                                }
                            </table>
                            </text>).Width(20);
                                   columns.Template(@<text>
                            <table cellspacing="0" cellpadding="0">
                                <tr id="data">
                                    <td>
                                        <input type="text" class="FacultyCompositionTextbox" value="@item.FCYear4Male"  @(Model.ReadOnlyFacultyCompositionNew[3]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);"  /></td>
                                    <td>
                                        <input class="FacultyCompositionTextbox" type="text" value="@item.FCYear4Female"  @(Model.ReadOnlyFacultyCompositionNew[3]) @(item.DisableCalculatedRow) maxlength="4" onkeypress="return IsNumeric(event);" />
                                        <input class="FacultyCompositionTextbox" type="hidden" value="@item.EthnicityPK" /></td>
                                </tr>
                            </table>
                            </text>)
                                                .HeaderTemplate(
                            @<text>
                            <table cellspacing="0" cellpadding="0">
                                @if (Model.FacultyCompositionColumnHeader[3] != "")
                                {
                                    <tr>
                                        <td colspan="2"><strong>@Model.FacultyCompositionColumnHeader[3]</strong></td>
                                    </tr>
                                    <tr>
                                        <td><span>M</span></td>
                                        <td><span>F</span></td>
                                    </tr>
                                }
                                else
                                {
                                    <tr>
                                        <td colspan="2"><strong></strong></td>
                                    </tr>
                                    <tr>
                                        <td><span></span></td>
                                        <td><span></span></td>
                                    </tr>
                                }
                            </table>
                            </text>).Width(60);
                               })
                                            .DataBinding(dataBinding => dataBinding.Ajax())
                                            .ABAGridConfiguration(true)
                                            .KeyboardNavigation(kbd => kbd.EditOnTab(false))
                                            .Render();
                        }
                    </div>
                </div>
            </div>

Answer 1

Finally found the solution :)

Steps Invloved : 1. To find the associated key value with TAB key 2. Once Keydown event fires focus moves to next control

$('input.FacultyCompositionTextbox').keydown(function(event) {
        if(event.which == 9) {
            //alert('a');
            $(this).next('input.FacultyCompositionTextbox').focus();
        }
    });

Regards, Praveen Nelge