Question

在我的Kendo Grid中，我需要三个与我的数据源绑定的单选按钮和inCell可编辑。问题是编辑。当我单击一列（并且我创建了一个div墙以强制调用编辑器）时，没有为编辑器正确设置该值。当我单击另一行和不同列时，不保存该值。如果我在同一列的另一行中单击，则名称（单选按钮组）未正确设置（两个具有相同名称的编辑器行）。有没有办法让编辑器正确运行？

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

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

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

<html>
   <!-- head code -->
<body>

<div id="grid"></div>

<script>
$(document).ready(function() {


var grid = $("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",
    title: "Period",
    template:  '<div style="position:relative">
                <input type="radio" name="group#: id#" value="F" #= period=="F" ? checked="checked" : "" # />First
                <input type="radio" name="group#: id#" value="S" #= period=="S" ? checked="checked" : "" # />Second
                <input type="radio" name="group#: id#" value="T" #= period=="T" ? checked="checked" : "" # />Third
                <div style="background-color: rgba(255, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0"></div>
                </div>',
    editor: '<input type="radio" name="group#: id#Editor" value="F" #= period=="F" ? checked="checked" : "" # />First
             <input type="radio" name="group#: id#Editor" value="S" #= period=="S" ? checked="checked" : "" # />Second
             <input type="radio" name="group#: id#Editor" value="T" #= period=="S" ? checked="checked" : "" # />Third'
  }]
});


}
</script>

</body>
</html>

Answer 1

您可以尝试在编辑器模板中使用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"   }] 
});

这是一个现场演示：http://trykendoui.telerik.com/@korchev/ahaX

剑道网格内的单选按钮

1 个答案: