Использование клавиатуры для изменения значения kendoMobileSwitch в сетке

Question

Я пытаюсь использовать мою сетку интерфейса Kendo UI только с клавиатурой. У меня проблема с булевыми столбцами. У меня настроена сетка, так что они могут перейти от одного поля к другому и продолжить редактирование элементов в сетке. Я использую kendoMobileSwitch для создания симпатичного интерфейса для логического (и страница должна работать как с мобильного, так и на рабочем столе). Я создал прослушиватель keydown, который я использую для табуляции, и я хотел переключиться, когда пробел попал (казалось логичным способом переключения переключателя), но я просто не могу понять, как программно переключите переключатель.

Вот скрипка: http://jsfiddle.net/omnius/j42mfb9y/

Один из столбцов сетки Кендо 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

Как у вас есть комментарий в вашей скрипке вам следует использовать текущие вместо текущего селектора и коды:

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

}