I am trying to make my Kendo UI Grid usable with keyboard only. I have an outstanding issue with boolean columns. I have the grid configured so that they can tab from one field to the next and continue editing the items in the grid. I'm using the kendoMobileSwitch to provide a pretty interface for the boolean (and the page must work both from mobile and desktop). I created a keydown listener, which I'm using for tabbing, and I wanted to toggle when the space bar is hit (seemed like a logical way to toggle the switch), but I just can't seem to figure out how to programmatically toggle the switch.
Here is a fiddle: http://jsfiddle.net/omnius/j42mfb9y/
One of the columns of the Kendo UI grid is a boolean column defined like this:
{
field: element.Field,
title: element.Title,
width: 50,
attributes: { class: "editable-cell" },
template: "<span>#= " + element.Field + " ? 'Yes' : 'No' #</span>",
editor: (container, options) =>
{
$("<input class='YesNoSwitch' data-role='switch' data-bind='checked: " + element.Field + "'/>")
.appendTo(container)
.kendoMobileSwitch({ onLabel: "Yes", offLabel: "No" });
},
}
I have a keyboard listener on the grid:
$("#grid").on("keydown", onGridKeydown);
The listener looks like this:
function onGridKeydown(e)
{
// if the user hits a tab, skip any fields that should not be edited.
// Note that this function currently fails if the last column on the last row
// is editable.
if (e.keyCode === kendo.keys.TAB)
{
var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
var current = grid.current();
if (!current.hasClass("editable-cell"))
{
var nextCell = current.nextAll(".editable-cell");
if (!nextCell[0]) // End of a row, jump to the next row, first editable field
{
nextCell = current.parent().next().children(".editable-cell:first");
if (nextCell.length === 0) // End of the table, jump to the first row, first editable field
{
nextCell = current.parent().parent().children("tr:first").children(".editable-cell:first");
}
}
grid.current(nextCell);
grid.editCell(nextCell[0]);
}
}
if (e.keyCode === kendo.keys.SPACEBAR)
{
var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
var switchChild = $(this).children(".YesNoSwitch:first");
if (switchChild != null)
{
// What do I put here? Do I have the right element at all?
}
}
};
Thanks in advance for any advice.
As you have comment in your fiddle you shoud use current instead of current selector and the code :
if (e.keyCode === kendo.keys.SPACEBAR)
{
var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
var current = grid.current();
var sw = current.find(".YesNoSwitch:first").data("kendoMobileSwitch");
sw.toggle();
}