Question

139

Kendo UI grid keyboard navigation

rated 0 times [ 142] [ 3] / answers: 1 / hits: 5562 / 11 Years ago, tue, december 10, 2013, 12:00:00

I want to make an editable, navigable kendo grid, that can set fields when some others filled. My problem is, the row must be selected to do such thing, but the standard keyboard navigation only moves the focused field, not the selected, using the arrow keys.
Additionally, i find something that might be it, but i don't seem to have a crack at it. Here's the link:
http://www.kendoui.com/forums/kendo-ui-complete-for-asp-net-mvc/grid/grid-keyboard-navigation-code-sample.aspx

So basically, i need some sort of a function, binding the selected row to the focused cell when navigated by arrow keys, or a new row created, or the selected deleted. If someone's willing to help me, i'd be very thankful. :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cayden

Add To Favorites

Follow

Total Points: 314

Total Questions: 107

Total Answers: 101

Location: Slovenia

Member since Wed, Apr 6, 2022

2 Years ago

answered 11 Years ago andreguym · Accepted Answer

To enable keyboard navigation in Kendo UI Grid you must enable this feature by navigatable option in initialization (http://demos.telerik.com/kendo-ui/grid/keyboard-navigation)

$(#grid).kendoGrid({

    ...

    selectable: row,

    navigatable: true,

    ...

});

If you want to navigate rows by its selection (without focusing and confirming), you should handle manually keydown event. In this event you can find focused cell and select row for this cell.

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

  }

}