剑道网格内的单选按钮

Question

剑道网格内的单选按钮

Mar*_*los 1 javascript jquery kendo-ui kendo-grid

在我的 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ata*_*hev 5

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，9 月前
查看次数：	13516 次
最近记录：	11 年，9 月前