使用键盘更改网格中 kendoMobileSwitch 的值

Question

我正在尝试使我的 Kendo UI 网格只能通过键盘使用。我对布尔列有一个突出的问题。我配置了网格，以便他们可以从一个字段切换到下一个字段并继续编辑网格中的项目。我正在使用 kendoMobileSwitch 为布尔值提供一个漂亮的界面（并且该页面必须在移动设备和桌面设备上都能正常工作）。我创建了一个 keydown 侦听器，我将其用于制表符，我想在 space 条被击中时进行切换（似乎是切换开关的一种合乎逻辑的方式），但我似乎无法理解了解如何以编程方式切换开关。

这是一个fiddle：http://jsfiddle.net/omnius/j42mfb9y/

Kendo UI 网格的其中一列是这样定义的布尔列：

{
    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" });
    },
}

我在网格上有一个键盘监听器：

$("#grid").on("keydown", onGridKeydown);

监听器看起来像这样：

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?
        }
    }
};

提前感谢您的任何建议。

Answer 1

由于您在 fiddle 中有评论，您应该使用当前而不是当前选择器和代码：

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

}

使用键盘更改网格中 kendoMobileSwitch 的值

Using keyboard to change value of kendoMobileSwitch in grid

kendo-ui

keyboard

kendo-grid

kendo-mobile