如何在Kendo UI Grid中创建三态复选框(true/false/null) [英] How to create tri-state checkbox (true / false / null) in Kendo UI Grid

问题描述

我用ASP.NET MVC 4和Kendo UI开发了一个Web应用程序.它具有一个包含复选框列的网格.我需要在该复选框列中有一个三态复选框(真，假，空).

I have developed a web application with ASP.NET MVC 4 and Kendo UI. It has a grid which contains a checkbox column. I need to have a tri-state checkbox (true, false, null) in that checkbox column.

如果用户在方框中打勾，则其值应为true；如果用户取消选中该方框，则其值应为false.重要的是，如果用户没有勾选或取消选中该框，则其值应为null.

If the user ticks the box then its value should be true, if the user untick the box then the value should be false. Important thing is if user left without ticking the box or unticking it then its value should be null.

在剑道网格中是否可以具有三个状态复选框?如果是，该怎么办?

Is it possible to have three state checkbox in a kendo grid? If yes how to do that?

推荐答案

根据此在文章中，将复选框设置为indeterminate状态的唯一方法是通过编程方式进行.问题在于，每次更新值时，包含该复选框的单元格都会重新绘制，因此第三个状态将被删除.

According with this article, the only way of setting a checkbox to indeterminate state is by doing it programatically. the problem is that each time that you update the value, the cell containing the checkbox is redrawn and as consequence the third state removed.

您可以通过以下方法进行检查:

You can check this by doing:

var grid = $("#stocks_tbl").kendoGrid({
    dataSource: [
        { id: 1, active: true, symbol: "AAPL" },
        { id: 2, active: false, symbol: "AMZN" },
        { id: 3, active: false, symbol: "GOOG" }
    ],
    editable  : true,
    columns   : [
        { field: "symbol", title: "Tick" },
        {
            field   : "active",
            template: '<input class="active" type="checkbox" #= active ? checked="checked" : "" # />'
        }
    ]
}).data("kendoGrid");

$(document).on("change", ".active", function (ev) {
    $(ev.currentTarget).prop("indeterminate", true);
    $(ev.currentTarget).prop("checked", true);
    alert("Shall I continue?");
    var item = grid.dataItem($(this).closest("tr"));
    item.set("active", true);
});

如果单击复选框，则将看到第三种状态，直到关闭对话框，然后我们将值设置为复选框.如果不设置，则该值不会反映在模型中.

If you click on the checkbox, you will see the third state until you close the dialog and we set the value to the checkbox. If we don't set it, the value is not reflected in the model.

这篇关于如何在Kendo UI Grid中创建三态复选框(true/false/null)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！