Telerik mvc grid tab order issue

Question

I am working in an MVC 3.0 application. In my project I used Telerk mvc grid for data listing. I made grid edit model as "InCell" and provided key board navigation in my question answer area. Each question will have 2 answer options such as "Facts" and "Actions" and will be numeric value. I have used "integer" editor template for this purpose. My requirement is that when the user presses tab key from "Facts" integer textbook, focus will move it to "Actions" integer textbox and if the user presses tab from "Actions" it will move to next row "Facts" text box. But currently key board navigation goes through all cells in the grid. There are few columns between "Facts" and "Actions". My code for grid listing looks like.

@(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 Integer editor template for "Facts" & "Actions" columns bellow.

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

score 2 · Accepted Answer · answered Dec 03 '12 at 21:18

Here is what I can suggest you as a work-around because your goal is not supported out of the box.

Feel free to optimize/change the implementation or to make it more generic (e.g. use classes to find cells and not to 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();
                })
            }
        }
    })
})

It worked when I made following changes for telerik grid. var grid = $('#persons').data().tGrid;grid.saveCell(currentCell);grid.editCell(cellToEdit); Thanks for your help. — Jayaraj, Dec 04 '12 at 09:57

score 0 · Answer 2 · answered Dec 03 '12 at 17:20

I´m not really sure how to do this, but have you tried using something like tabindex, perhaps by using it within the htmlAttributes? Anyway, I have never done anything like this but maybe you can try something in that 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 might have to mix this somehow within each item. Then again, maybe I´m misunderstanding your point (I´ve been known to do that) :)

Telerik mvc grid tab order issue

2 Answers2