Using keyboard to change value of kendoMobileSwitch in grid

Question

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.

Answer 1

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

}