Kendo grid - how to make whole row selection navigetable by UP/DOWN keyboard keys?

3
votes

I have the following grid with coloured row after the mouse click on the selected row.

enter image description here

I would like to add the same functionality if user will using UP and DOWN rows on the keyboard with event where actual selected row by keyboard will be passed like in the change function below.

How can i do it please using the Kendo?

change: function (e) {
              var selectedRows = this.select();
              var selectedDataItems = [];
              for (var i = 0; i < selectedRows.length; i++) {
                  var dataItem = this.dataItem(selectedRows[i]);
                  selectedDataItems.push(dataItem);
              }
              console.log(selectedDataItems);
              $scope.setDetailToScope(selectedDataItems, "row_select");
          },

Edit:

I tried this function too:

$(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"));
            });
        }
    })
});

Up/Down button is recognized but i cannot get the next selected row and colorize it.

2
javascriptkendo-uikendo-gridkeyboard-events

2 Answers

3
votes

You can simply enable Kendo navigatable feature:

$("#grid").kendoGrid({
    ...
    selectable: "row",
    navigatable: true,
    ...
});

Similarly to: http://demos.telerik.com/kendo-ui/grid/keyboard-navigation

EDIT: To navigate without ghost highlighting you should manually handle this:

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

https://jsfiddle.net/bzm5dwvo/

0
votes

you must set grid Selectable and GridSelectionMode set Single like : 

.Selectable(s=> s.Mode(GridSelectionMode.Single))

and you can use Navigate envent in grid events :

.Events(evt=> evt.Navigate("navigate"));

and in js function :

function navigate(e) {
    var grid = e.sender;
    grid.select(grid.tbody.find(e.element.parent()));
}