Tabbing issue with command columns

[Richard]

I'm using Kendo UI ASP.NET.  I have a grid control that has 3 columns; 2 dropdowns and a delete button via command.Destroy().  When I tab through the grid, it does the following tab order:

1) For each row:

    a) Column 1

    b) Column 2

    c) Column 3

That's all good.  After that, though, it goes back to and focuses on row 1, column 3, the actual "Delete" button embedded in the column.  If you continue tabbing, it goes through all of the rows at this point on the Delete button.  After all of that, it leaves the grid.

So, to rephrase, it tabs through all 3 columns through the entire table, row by row.  After that, instead of leaving the table, it goes back up to row 1, the delete button, then row 2, the delete button, then row 3, the delete button, ..., the last row, the delete button, then it leaves the grid.

I don't want it to be going through the delete buttons row by row.  Any ideas on what I can try?

 

[Preslav]

Hi Richard,

A possible solution is handling the TAB keydown event via jQuery.

That said, I believe that the "Skip Non-Editable Cells When Tabbing" example will help you in achieving this.

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/skip-non-editable-cells-when-tabbing

Regards,
Preslav
Telerik by Progress

[Richard]

I'm trying to handle the tab key using JQuery but am having issues.  I think the fact that my Grid is .Navigatable() may have something to do with it.

This this handler, the event only gets called for columns 1 and 2, not column 3 (the DELETE/Destroy column):

$(grid.tbody).on("keydown", handleKeyDown);

For this handler, the event gets called for all columns, but I can't get my current row using $(argument.target).closest('tr'):

$(grid.table).on("keydown", handleKeyDown);

I've tried all kinds of stuff.  I'll admit, my JQuery isn't my strong suit, but I'm also not completely lost.

If I had the row index, I'd be good to go.  I get the column index with grid.cellIndex(grid.current()), but I can't figure out how to get my current row (and all the help from your forums and Google appears to reference closest("tr") in some form which I can't get working).

[Preslav]

Hello Richard,

Usually, $(argument.target).closest('tr') is the way to go.

That said, could you please share a runnable Dojo or a project that clearly isolates the problem. I will debug it locally and eventually find a solution/workaround for this behavior.

I look forward to your reply.


Regards,
Preslav
Telerik by Progress

[Richard]

Thanks for the offer.  I may take you up on it, but, at this point, I am needed on another high priority project.  I'm also second guessing whether what I'm trying to do overall is wise (I've posted a general question about my approach to get Telerik's thoughts).

[Alex Hajigeorgieva]

Hello Richard,

Another approach I would suggest is to set the tabindex of the button to -1 on the dataBound event of the Kendo UI Grid:

https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute

dataBound: function(){
// inspect the DOM to see get the name of the button
 $(".k-grid-ViewDetails").attr("tabindex", -1);
}

You can determine the class name by either the name of the command button or a className which may have been attributed to it:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.className
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.name

The convention which generates the class with which the button is decorated is "k-grid-" prefix and then the name of the button.

Regards,
Alex Hajigeorgieva
Telerik by Progress