将可绑定的复选框列添加到网格

Question

在Kendo网格中有此列当前显示MySQL布尔值,因此我们有1或0.

让这个演示发挥...

这在autosync和inline:true网格中.

我希望这个列的类型为"Checkbox"但是,由于一些奇怪的原因,我只是在网络上找不到一个演示或示例,显示"启用"复选框,在取消选中时将1更改为0并且副Versa.

Answer 1

以前有一些注意事项:

1. 单击单元格进行编辑时,将其切换为编辑模式,然后执行编辑器功能.
2. 如果您使用HTML时未处于编辑模式,则更改不会在模型中传输.
3. Kendo UI呈现boolean为编辑复选框,但不在编辑模式下.

你需要做的是:

1. 定义用于显示复选框的模板.
2. 如果您不想单击两次复选框(第一个进入编辑模式,第二个进入更改它的值),则需要定义一个复选框,但绑定一个更改事件,该事件拦截对它的点击并更改模型.

模板定义:

{
    title   : "Fully Paid",
    field   : "fullyPaid",
    template: "<input name='fullyPaid' class='ob-paid' type='checkbox' data-bind='checked: fullyPaid' #= fullyPaid ? checked='checked' : '' #/>"
}

正如您所看到的,我没有定义编辑器功能,因为我们将更改复选框的值而不进入编辑模式.

定义一个处理程序,用于检测我在模板中定义的复选框中的更改并更新模型.

grid.tbody.on("change", ".ob-paid", function (e) {
    var row = $(e.target).closest("tr");
    var item = grid.dataItem(row);
    item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
});

您的JSBin在此修改:http://jsbin.com/ebadaj/12/edit

Answer 2

我的批处理编辑网格遇到了同样的问题.我发现的解决方案仅适用于一个特定的色谱柱(如上所述).所以我改变了

item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);

至

var col = $(this).closest('td');
dataItem.set(grid.columns[col.index()].field, checked);

因此,您可以将其用于任何复选框列.

下一个问题是使用复选框的"单击编辑"选项时未正确设置的脏标志.

所以我已经测试了各种各样的东西,以使它工作,并努力与此:

在列定义中:

.ClientTemplate("<input type='checkbox' #= CheckboxColumn? checked='checked': checked='' # class='chkbx' />");

和脚本如下:

<script>
    $(function () {
        $('#GridName').on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#GridName').data().kendoGrid;
            grid.closeCell();
            var dataItem = grid.dataItem($(this).closest('tr'));
            var col = $(this).closest('td');
            grid.editCell(col);
            dataItem.set(grid.columns[col.index()].field, checked);
            grid.closeCell(col);
        });
    });
</script>