Tab Navigation causing a console error

[Cory]

Hello,

I am currently utilizing the JQuery Kendo UI Grid (v2018.3.1017) with keyboard navigation and  editing.  I have noticed that when utilizing the tab key navigation abilities with the if you are on the last column of a row, a console error will be thrown on the tab key press, and navigation does not continue to the next row.

 

After digging into the kendo  grid source code, I found that the cause seems to be that the hierarchy cell is actually being selected by the navigation logic, and the editCell method is being fired on this cell.  Which leads to the console error in the attached image.

I found that the cause for this seems to revolve around the _tabNext method, which is using a selector (DATA_CELL) that is incorrect.  The selector (:not(.k-group-cell):not(.k-hierarchy-cell:not(:has(.k-icon.k-i-collapse,.k-icon.k-i-expand))):visible) does not properly ignore hierarchy cells.

We have fixed this issue in our logic by overwriting the selector with the following selector (td:not(.k-group-cell):not(.k-hierarchy-cell):visible).

We have not yet upgraded to the 2019 version of the Kendo UI Grid, so I'm not sure if this issue has been addressed or not, but wanted to make your team aware of it.

[Tsvetomir]

Hi Cory,

Based on the provided information, I conducted several tests. However, I did not manage to reproduce the described issue. 

Can you provide additional details on the exact scenario under which I can observe the faulty behavior? As well as in which browser it is present or all of them? Perhaps, you might use the Dojo sample below to replicate the issue and send it back to me:

https://dojo.telerik.com/apavElir


Kind regards,
Tsvetomir
Progress Telerik

[Russ]

Version: 2019.1.220,   File: kendo.grid.js,  Function: editRow

We see the following code:

} else if (mode === 'incell') {
    $(row).children(DATA_CELL).each(function () {
        var cell = $(this);
        var column = leafColumns(that.columns)[that.cellIndex(cell)];
        model = that._modelForContainer(cell);
        if (model && (!model.editable || model.editable(column.field)) && column.field && !column.selectable) {
            that.editCell(cell);
            return false;
        }
    });
}

 

However, DATA_CELL selector is defined as:

:not(.k-group-cell):not(.k-hierarchy-cell:not(:has(.k-icon.k-i-collapse,.k-icon.k-i-expand))):visible

This still selects the k-hierarchy-cell.   No idea why you are trying to only select cells w/o the icons in them in this selector.

Since the hierarchy cell is selected, that.cellIndex returns -1.  Therefore column is null.  Then when column.field is used, it logs a console error just as the OP stated.

 

 

[Tsvetomir]

Hi Russ,

The navigatable functionality of the hierarchy grid is implemented in such way that it allows for expanding and collapsing the detail templates. With the default set-up of the grid it would omit the icons and focus directly onto the cell. In a hierarchical grid with editing enabled, I did not manage to replicate the issue on my side. Here is a short video demonstrating the behavior observed on my end:

https://screencast-o-matic.com/watch/cqeolg0BgY

And the Dojo sample:

https://dojo.telerik.com/UNEHEguV


Can you try to reproduce the issue you are facing on your side in the provided Dojo above? This way I would be able to examine the behavior locally and look for its cause. 


Kind regards,
Tsvetomir
Progress Telerik

[Russ]

Hey Tsvetomir,

The thing is to call the editRow function.

I've updated your Dojo:

https://dojo.telerik.com/UNEHEguV/3

Run it in Chrome and click the "Push Me" button.

 

[Tsvetomir]

Hi Russ,

Thank you for modifying the Dojo sample and pointing me into the roots of the issue.

There are two major things that I have noticed.

1. The editRow method is used while the edit mode of the grid is set to "incell". The editRow requires the grid to have either "inline" or "popup". More information on the matter can be found in the following article:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/editrow

2. The value which is passed as an argument to the method has to be the jquery object which represents the table row rather than a data item. Here is an example of how to target the table row:

$("#editButton").click(function() {
  var uid = grid.dataSource.view()[0].uid;
  var row = $(".k-grid-content tr[uid='"+ uid +"']");

  grid.editRow(row);
});

I hope these clarifications prove helpful.


Kind regards,
Tsvetomir
Progress Telerik