Telerik mvc 网格选项卡顺序问题

Posted 2023-05-07

【中文标题】Telerik mvc 网格选项卡顺序问题

【英文标题】：Telerik mvc grid tab order issue

【发布时间】：2012-11-20 19:15:10

【问题描述】：

我正在使用 MVC 3.0 应用程序。在我的项目中，我使用 Telerk mvc 网格来列出数据。我将网格编辑模型设为“InCell”，并在我的问答区域提供了键盘导航。每个问题将有 2 个答案选项，例如“事实”和“行动”，并且将是数值。为此，我使用了“整数”编辑器模板。我的要求是，当用户从“Facts”整数教科书中按 Tab 键时，焦点会将其移至“Actions”整数文本框，如果用户从“Actions”按 Tab 键，它将移至下一行“Facts”文本框。但目前键盘导航会遍历网格中的所有单元格。 “事实”和“行动”之间的栏目很少。我的网格列表代码如下所示。

@(html.Telerik().Grid<AnswerQuestionVM>()
    .Name("GridQuestions")
    .DataKeys(keys =>
    
        keys.Add(p => p.QuestionID);
    )
    .Columns(columns =>
    

        columns.Bound(p => p.QuestionNumber).Format("0:0.00").HtmlAttributes(new  style = "text-align:center;" ).Title("#").Width("5%").ReadOnly();

        columns.Bound(p => p.QuestionName).Title("Question Name").Width("43%").ReadOnly();

        columns.Bound(p => p.Facts).Width("8%");

        columns.Template(@<text></text>).ClientTemplate("<img src='" + @Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=FactOptions#>' />");

        columns.Bound(p => p.Actions).Width("8%");

        columns.Template(@<text></text>).Width("2%").ClientTemplate("<img src='" + @Url.Content("~/images/help.gif") + "' name='help' alt='help' title='<#=ActionOptions#>' />");

        columns.Template(@<text></text>).Title("Skip").Width("3%").ClientTemplate(
        "<# if(Skip==false) #>" +
        "<input type='checkbox' style='cursor:pointer;' class='skipClass' />" +
                 "<# else#>" +
        "<input type='checkbox' style='cursor:pointer;' class='skipClass' checked='checked' />" +
        "<#  #>"
        );

        columns.Bound(p => p.Note).Title("Note").Width("26%");

    )
         .Editable(editing => editing.Mode(Telerik.Web.Mvc.UI.GridEditMode.InCell))
         .KeyboardNavigation( navigation => navigation.EditOnTab(true))
         .ClientEvents(e => e.OnSave("OnSave"))
         .DataBinding(dataBinding =>
         
            dataBinding.Ajax().Select("GetQuestion", "AnswerQuestion", new  Area = "question",  ajax = true ).Enabled(true);
         )
                                                                                              .Scrollable(scrolling => scrolling.Enabled(false))
                                                                                             .Sortable(sorting => sorting.Enabled(true))
                                                                                             .Pageable(paging => paging.Enabled(true))
                                                                                             .Filterable(filtering => filtering.Enabled(true))
                                                                                             .Groupable(grouping => grouping.Enabled(false))
                                                                                             .Footer(true)
                                                                 )

下面“Facts”和“Actions”列的整数编辑器模板代码。

@(Html.Telerik().IntegerTextBox()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty))
            .InputHtmlAttributes(new  style = "width:100%", pattern = "[0-9]*" )
    .MinValue(1)
    .MaxValue(5)
    .Value(Model)        

)

请提供解决方案。任何帮助表示赞赏。

【参考方案1】：

以下是我可以建议您作为解决方法的方法，因为您的目标不受开箱即用的支持。

随意优化/更改实现或使其更通用（例如，使用类来查找单元格而不是依赖索引）

 $(function () 
    $('#persons tbody').on('keydown', function (e) 
        if (e.keyCode == 9) 
            var currentCell = $(e.target).closest('td');
            var cellIndex = currentCell.index();
            if (cellIndex == 2 || cellIndex == 4)  //if editing cell in third or fifth column, use different indexes if needed
                e.stopPropagation();
                e.preventDefault();
                var grid = $('#persons').data().kendoGrid;

                if (cellIndex == 2) 
                    var cellToEdit = currentCell.parent().find('td:eq(4)');
                    grid._handleEditing(currentCell, cellToEdit);  
                
                if (cellIndex == 4) 
                    var cellToEdit = currentCell.parent().find('td:eq(2)');
                    grid._handleEditing(currentCell, cellToEdit);   
                
                setTimeout(function () 
                    cellToEdit.find('input').focus();
                )
            
        
    )
)

【讨论】：

当我对 Telerik 网格进行以下更改时，它起作用了。 var grid = $('#persons').data().tGrid;grid.saveCell(currentCell);grid.editCell(cellToEdit);感谢您的帮助。

【参考方案2】：

我不太确定如何执行此操作，但您是否尝试过使用 tabindex 之类的东西，也许是在 htmlAttributes 中使用它？无论如何，我从来没有做过这样的事情，但也许你可以在那个领域尝试一下：

columns.Bound(p => p.Facts).Width("8%").HtmlAttributes(new  tabindex = 1 );
columns.Bound(p => p.Actions).Title("Practice").Width("8%").HtmlAttributes(new  tabindex = 2 );

由于您使用的是 Telerik Grid，您可能需要在每个项目中以某种方式混合使用它。再说一次，也许我误解了你的观点（我知道这样做）:)