javascript 剑道网格内的单选按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23220367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio buttons inside Kendo grid
提问by Marlos
In my Kendo Grid I need three radio buttons binded to my data source and inCell editable. The problem is the editor. When I click in a column (and I created a div wall to force calling the editor), the value is not correctly set for the editor. When I click in another row and different column the value is not saved. And if I click in another row for same column, the name (radio group) is not correctly set (two editor lines of with same name). Is there a way to have the editor correctly behaving?
在我的 Kendo Grid 中，我需要绑定到我的数据源和 inCell 可编辑的三个单选按钮。问题出在编辑器上。当我单击一列（并且我创建了一个 div 墙来强制调用编辑器）时，该值没有为编辑器正确设置。当我单击另一行和不同的列时，该值不会被保存。如果我单击同一列的另一行，则名称（无线电组）设置不正确（两个编辑器行具有相同的名称）。有没有办法让编辑器正确运行？
I have the following grid defined using JavaScript:
我使用 JavaScript 定义了以下网格：
EDIT 1:I added some line-breaks in template and editor for increased readability but they shouldn't exist in code.
编辑 1：我在模板和编辑器中添加了一些换行符以提高可读性，但它们不应该存在于代码中。
EDIT 2:Fixed error in input tag validation.
编辑 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>
回答by Atanas Korchev
You could try using MVVM in your editor template to bind the period field to the currently selected radio button.
您可以尝试在编辑器模板中使用 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" }]
});
Here is a live demo: http://trykendoui.telerik.com/@korchev/ahaX
这是一个现场演示：http: //trykendoui.telerik.com/@korchev/ahaX
