Grid Row Navigation by Keyboard

[Nariman]

Hi,
In Kendo UI Grid when navigatable is true, by right the keyboard Navigation should work base on the value of the "selectable" property. If the selectable value is "row"  then the up-arrow key should make the previous row, selected... and similarly down-arrow key should make the next row, selected! However, Kendo Grid regardless of the value of selectable property, it's always navigating over cells!

I'm not sure if it's a bug or it's the way it works!

However, this would be both logically and practically make sense for keyboard navigation to work based on the value of the "selectable" property.

Please kindly help to evaluate the above request and advise how can we achieve keyboard navigation (up and down arrows) over rows?

Thank you.

[Dimiter Madjarov]

Hello Nariman,

By design the Grid navigation is moving cell by cell and highlighting the next one when pressing the arrow keys. Nevertheless if a selection is performed by pressing the space bar key, the current row will be selected if the selection type is set to "row". You could assure that this is true in the following demo.


Regards,
Dimiter Madjarov
Telerik

 

 

[Nariman]

Thanks Dimiter,
What we want is to eliminate the need to press SpaceBar Key to select the row.
Example: Row #1 is selected, user press down-arrow then Row #2 should be automatically selected.

1. How can we achieve this. Is there any workaround to achieve the above goal. example using JQuery? (it's crucial for us to achieve this as it affects the user-friendliness of the solution).

2. {Suggestion} - I believe it's also good that you enhance/solve this shortcoming inside the Grid design, because developer like us who has already decided row selection (selectable: "row") during design-time, it doesn't make sense that still the keyboard navigation is at the cell level, isn't it?

Thank you.

[Dimiter Madjarov]

Hello Nariman,


The current requirement is a custom scenario and it is not supported out of the box. You should manually handle the up/down arrows keydown events and select the row of the highlighted cell. Here is a sample implementation.
E.g.

$(function () {
    var arrows = [38, 40];
    var grid = $("#grid").data("kendoGrid");
    grid.table.on("keydown", function (e) {
        if (arrows.indexOf(e.keyCode) >= 0) {
            setTimeout(function () {
                grid.select($("#rowSelection_active_cell").closest("tr"));
            });
        }
    })
});

Please keep in mind that this is a custom unsupported scenario and the sample code may not address the exact current requirements. For example it does not take into account the ctrl and shift keys. Feel free to use the code as a starting base and modify it according to the current needs.

Regarding the second point, the current behavior is by design. The Grid could have for example a row selection and an InCell editing, which will still require the focusing of a single cell in order to edit it. Nevertheless if you consider that this behavior could be improved, feel free to share the suggestion in our Feedback portal.

Regards,
Dimiter Madjarov
Telerik

 

 

[Nariman]

Thank you Dimiter, it worked!
However, now there are 2 challenges which I need your advise and sample code:
1. pressing the UpArrow on the Grid select the previous row which is fine (based on your above solution), however when you are already at the first row, pressing UpArrow will make one of the Column Header Cell, focused! We don't want this behavior as we would like the UpArrow at the first row of every page to change the Page to the previous page (and if it's already the first page then go to last page), and select the last row of the page!

2. How to select a row based on its row index within the page? Example: Page size=20, we want to select a row number 10.

Thank you.   

[Dimiter Madjarov]

Hi Nariman,


I am glad that the sample code was helpful. As stated previously, the scenario is not supported and I provided the example to get you up and running with the implementation. You could use it as a base and add further functionality if needed.

As a general advises, for the first requirement you could check if the currently focused row is the first one in the grid table, switch to the previous page with the page method of the Grid dataSource and select the last row with the select method of the Grid after the new set of data is bound.

For the second requirement you could use jQuery, for example the eq() selector to retrieve the row at the specified index and then again use the select method to select it.

Regards,
Dimiter Madjarov
Telerik

 

 

[Nariman]

Thanks a lot Dimeter.
However, if you don't fix it inside the kendo grid js design, there is almost no way for us (developers) to achieve what we want (unless we change it in your js which we don't want to do it). Here are some technical reasons why we cannot do it:
1. If we use your recommended script bellow:
    var grid = $("#grid").data("kendoGrid");    
    grid.table.on("keydown", function (e) {
When the grid navigatable is true, we can get the UpArrow event until the first row, if user press UpArrow again the grid header cell will be focused. Now the problem is here: if user at this level (header cell is focused) press downArrow, you focus one of the cell of the first row but we don't receive any KeyDown event ! Why? Isn't it a bug?

2. When selectable: "row", and we are at the first row, How can we stop the UpArrow to go to header cell? because once any of the header cell is focused, we no longer receive the KeyDown event. Why? I think you use preventDefault to cancel the event...may be to keep the user navigation within the grid area! But by doing that the developer code will be black-out.

3. Unless you have a work-around solution for us (which will be very much appreciated), otherwise you really have to solve this problem at your design level.

4, Still I think there should be difference between selectable="cell" and selectable="row" (for keyboard Up&Down Arrow navigation). or perhaps you want to add another choice, example selectable: "row cell" (to replace the current setting for "row") and the selectable = "row", just select the row and DO NOT go to grid header!

Thank you and looking forward hearing from you soon.

[Dimiter Madjarov]

Hello Nariman,


If the Grid is scrollable, the column headers are in a separate table element. If that is the current case, than the behavior is expected, because the keydown event handler is attached to the grid.table field, which refers to the content (not headers) table of the Grid. I think this covers the first two points of the list that you provided.

Regarding the 3rd and 4th points, as stated previously the behavior is by design and is stated in the documentation.

---

The navigation occurs at a cell level regardless of what selectable mode is specified. The current row/cell will be selected when the space bar is pressed.

---

If you consider that this is not the correct behavior, you could post a suggestion for improving it in our Feedback portal.

Regards,
Dimiter Madjarov
Telerik

 

 

[Rajeev]

Hi,
I have same issue ,
How can prevent to focus on grid header.

ragards,
rajeev kumar

[Dimiter Madjarov]

Hello Rajeev,

This behavior is not supported by the Kendo UI Grid at the moment. You could post the suggestion in our feedback portal.

Regards,
Dimiter Madjarov
Telerik

 

 

[Paul]

We had the same issue and this example helped us.

The only issue we had was ensuring that you deselect before selecting the next row.

  $(function ()
        {
            var arrows = [38, 40];
            gridS.table.on("keydown", function (e)
            {
                if (arrows.indexOf(e.keyCode) >= 0)
                {
                    setTimeout(function ()
                    {
                        gridS.clearSelection();
                        gridS.select($("#ListUserGrid_active_cell").closest("tr"));
                    },10);
                }
            })
        });

[Dimiter Madjarov]

Hello Paul,

Thank you for sharing your implementation with the community.

Regards,
Dimiter Madjarov
Telerik