Tabbing issue with command columns

6 posts, 0 answers
  1. Richard
    Richard avatar
    8 posts
    Member since:
    Apr 2017

    Posted 04 May 2017 Link to this post

    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?

     

  2. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 05 May 2017 Link to this post

    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.
  3. Richard
    Richard avatar
    8 posts
    Member since:
    Apr 2017

    Posted 05 May 2017 in reply to Preslav Link to this post

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

  4. Preslav
    Admin
    Preslav avatar
    574 posts

    Posted 09 May 2017 Link to this post

    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.
  5. Richard
    Richard avatar
    8 posts
    Member since:
    Apr 2017

    Posted 09 May 2017 Link to this post

    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).
  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1017 posts

    Posted 11 May 2017 Link to this post

    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 visualization (charts) and form elements.
Back to Top