Telerik mvc grid tab訂單問題

Question

我正在使用MVC 3.0應用程序。在我的項目中，我使用Telerk mvc網格進行數據列表。我將網格編輯模型製作爲「InCell」，並在我的問題答案區域提供了鍵盤導航。每個問題將有2個答案選項，如「Facts」和「Actions」，並且將是數字值。我爲此使用了「整數」編輯器模板。我的要求是，當用戶按下「Facts」整數教科書中的Tab鍵時，焦點將移動到「Actions」整數文本框，如果用戶按下「Actions」中的選項卡，它將移動到下一行「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) 
                   ) 

代碼整數編輯模板「事實」 &「操作」列吼叫。

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

）

請提供一個解決方案。任何幫助表示讚賞。

Answer 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(); 
       }) 
      } 
     } 
    }) 
}) 

Answer 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的網格，你可能需要的每個項目內以某種方式混合這一點。然後再次，也許我誤解你的觀點（我已經知道這麼做）:)