This is a migrated thread and some comments may be shown as answers.

Tabbing issue with command columns

5 Answers 553 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 04 May 2017, 01:11 PM

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?

 

5 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 05 May 2017, 01:21 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Richard
Top achievements
Rank 1
answered on 05 May 2017, 08:07 PM

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).

0
Preslav
Telerik team
answered on 09 May 2017, 08:59 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Richard
Top achievements
Rank 1
answered on 09 May 2017, 12:22 PM
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).
0
Alex Hajigeorgieva
Telerik team
answered on 11 May 2017, 09:36 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Richard
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or