0

I am having a issues with a checkbox column in a grid.

I have a grid with multiple checkbox columns. When I check the box, the dirty tick is not there, however when I click on the cell that contains the checkbox, but not the check box and then click the checkbox, I get the dirty tick mark.

Has anyone see this before? I would like it to be a bit more consistent because after a few clicks the dirty marks for some rows disappear.

This just seems odd.

Thanks!

4

4 回答 4

0

我解决它的方法是使模型中的字段不可编辑，因此它强制点击事件触发，然后我只需更新值并设置脏属性。问题是，如果您单击单元格，则会触发编辑事件而不是单击，反之亦然，因此我没有触发两件事，而是禁用了一个。有些人会称之为 hack，但我看不出还有什么方法可以防止这两个事件触发。

于 2013-03-28T17:14:57.070 回答
0

请试试这个：

 //Cell click Checkbox select
    $('#grd' + gridName).on("click", "td", function (e) {
        var selectedTd = $(e.target).closest("td");              
         var grdChkBox = selectedTd.parents('tr').find("td:first").find('input:checkbox');
         grdChkBox.prop('checked', !grdChkBox.prop('checked'));

    });
于 2013-03-29T11:05:05.587 回答
0

是的，我经常看到这种情况：取决于您如何实现复选框。如果您直接勾选一个复选框，您会修改模型，input但不会修改模型。如果您勾选单元格，然后勾选复选框，则 Kendo UI 切换到编辑模式，并且（在后台）它用允许修改模型的 Kendo UI 管理（事件处理程序）的复选框的可编辑版本替换复选框。

编辑：如果您希望您的复选框始终可点击，那么您可以这样做：

var grid = $("#stocks_tbl").kendoGrid({
    dataSource: new kendo.data.DataSource({
        ...
        schema: {
            model: {
                id    : "id",
                fields: {
                    active: { type: "boolean" }
                }
            }
        }
    }),
    editable  : "incell",
    columns   : [
        {
            field   : "active",
            title   : "Active",
            template: '<input type="checkbox" data-bind="source: active" #= active ? checked="checked" : ""# />'
        },
        ...
    ]
}).data("kendoGrid");

在这里，您定义一个input始终可点击的。

$(document).on("change", "[type='checkbox']", function(ev) {
    var item = grid.dataItem($(this).closest("tr"));
    item.set("active", ev.srcElement.checked);
});

有了这个，我们定义了一个处理程序来拦截 上的更改input并将它们反映在model.

这样可以节省您玩的时间editable

于 2013-03-26T21:40:53.797 回答
0

实际上，首先您需要单击单元格以进入“编辑”模式，然后您可以检查/取消实际复选框。为了获得更好的用户体验，您可以像在此代码库文章中实现复选框一样实现复选框。（如果您不使用 ASP.NET MVC 包装器 - 不用担心，只需打开项目到Views/Home/Index.cshtml下，您可以复制/粘贴代码 - 都是 JavaScript。

代码库还包括如何在列标题中创建复选框“全选”。

于 2013-03-27T06:17:10.980 回答