Telerik mvc grid mesh problem

Question

I am working in an MVC 3.0 application. In my project, I used the mvc Telerk grid to enumerate the data. I made a mesh editing model as "InCell" and provided keyboard navigation in the answer area of ​​the question. Each question will have two possible answers, such as Facts and Actions, and will have a numerical value. To do this, I used the "integer" editor template. My requirement is that when the user presses the tab key from the Facts integer textbook, the focus moves it to the Actions text box and if the user clicks the Actions tab, it will move to the next Facts text box on the next line . But currently, the navigation keyboard goes through all the cells in the grid. There are several columns between Facts and Actions. My code for the grid list is as follows.

@(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) ) 

Code for the Integer editor template for the Facts and Actions columns below.

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

)

Please provide a solution. Any help is appreciated.

Answer 1

Here's what I can offer you as a workaround because your goal is not supported out of the box.

Feel free to optimize / change the implementation or make it more general (for example, use classes to search for cells and not rely on indexes)

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

I'm not sure how to do this, but have you tried using something like tabindex, possibly using it in htmlAttributes? Anyway, I have never done anything like this, but maybe you can try something in this area:

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

Since you are using Telerik Grid, you may need to mix this somehow inside each element. Again, maybe I misunderstand your point of view (I knew that I was doing this) :)