Javascript 剑道格网内的单选按钮

在我的剑道网格中，我需要三个单选按钮绑定到我的数据源，并且可以编辑。问题在于编辑。当我在列中单击并创建div wall以强制调用编辑器时，编辑器的值设置不正确。当我在另一行和不同列中单击时，该值不会保存。如果我在同一列的另一行中单击，则“名称无线电组”的设置不正确，两个编辑器行的名称相同。有没有一种方法可以让编辑器正常工作

我使用JavaScript定义了以下网格：

编辑1：为了提高可读性，我在模板和编辑器中添加了一些换行符，但它们不应该存在于代码中

编辑2：修复了输入标记验证中的错误

---

您可以尝试在编辑器模板中使用MVVM将句点字段绑定到当前选定的单选按钮

$("#grid").kendoGrid({   dataSource: [{
    id: 1, name: "John", period: "F"   }, {
    id: 2, name: "Mary", period: "S"   }],   editable: true,   columns: [{
    field: "name",
    title: "First Name"   }, {
    field: "period",
    template: "<label>First<input disabled type='radio' value='#: period #' #= period== 'F' ? 'checked' : ''# >" +
              "<label>Second<input disabled type='radio' value='#: period #' #= period== 'S' ? 'checked' : ''# >"
    ,
    editor: "<label>First<input name='period' type='radio' data-bind='checked:period' value='F'>" +
    "<label>Second<input name='period' type='radio' data-bind='checked:period' value='S'>"
    ,
    title: "Period"   }] 
});

---

这里是一个实时演示：

您可以尝试在编辑器模板中使用MVVM将句点字段绑定到当前选定的单选按钮

$("#grid").kendoGrid({   dataSource: [{
    id: 1, name: "John", period: "F"   }, {
    id: 2, name: "Mary", period: "S"   }],   editable: true,   columns: [{
    field: "name",
    title: "First Name"   }, {
    field: "period",
    template: "<label>First<input disabled type='radio' value='#: period #' #= period== 'F' ? 'checked' : ''# >" +
              "<label>Second<input disabled type='radio' value='#: period #' #= period== 'S' ? 'checked' : ''# >"
    ,
    editor: "<label>First<input name='period' type='radio' data-bind='checked:period' value='F'>" +
    "<label>Second<input name='period' type='radio' data-bind='checked:period' value='S'>"
    ,
    title: "Period"   }] 
});

这是一个现场演示：