选项卡索引在Grid中不起作用

时间:2014-08-04 13:51:51

标签: c# asp.net-mvc telerik-grid

![在此输入图像描述] [1]在我的应用程序中,我使用了MVC telerik网格,以输入文本框为界。当我在Internet Explorer和Chrome浏览器中运行应用程序时,工作正常和控件中的选项卡索引从一个文本框移动到另一个文本框。但是当使用Firefox浏览器时,选项卡索引从表格行移动到表格行并突出显示完整的单元格。

请帮我解决这个问题。

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

1 个答案:

答案 0 :(得分:1)

终于找到了解决方案:)

隐藏的步骤: 1.使用TAB键查找关联的键值 2.一旦Keydown事件触发焦点移动到下一个控件

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

此致 Praveen Nelge