如何控制复选框并在网格上显示 kendo ui

Question

我是 kendo ui 的新手。我需要你的帮助我需要在某处使用复选框。我的问题是当我编辑任何记录时，弹出菜单上的复选框可以显示属性状态但网格不显示。我想在网格上的复选框中显示记录的属性。

我尝试了这个示例 :http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column 但它不符合我的预期。

这是我的代码：

                    {
                        field: "isWorking",
                        title: "Çalışıyor",
                        editor: '<input type="checkbox" #= isWorking ? \'checked="checked"\' : "" # class="chkbx" />'
                    },
                    {
                        command: [
                            {
                                name: "edit",
                                text: {
                                    edit: "",
                                    update: "Tamam",
                                    cancel: "İptal"
                                },
                                className: "grid-command-iconfix"
                            },
                            {
                                name: "destroy",
                                text: "",
                                className: "grid-command-iconfix"
                            }
                        ],
                        title: "&nbsp;",
                        width: "120px"
                    }
                ],
                editable: {
                    mode: "popup",
                    window: {
                        title: "Kayıt".i18n()
                    },
                    confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
                    confirmDelete: "Yes"
                },
                edit: function (e) {
                    console.log(e);
                    $("#maritalStatus").data("kendoDropDownList");
                }
            });
        }
    });

    $("personGrid.k-grid-content").on("change","input.chkbx",function(e){
        var grid = $("#personGrid").data("kendoGrid"),
            dataItem = grid.dataItem($(e.target).closest("tr"));

        dataItem.set("isWorking", this.checked);
    });

以及其工作原理的屏幕截图。请关注ss。

从这里开始，这是我给出的 linke 解决方案。

这里的代码是我的第一个作品：

 {
                        field: "isWorking",
                        title: "Çalışıyor",
                        template: "<input type='checkbox' id='isWorking'/>"
                    },
                    {
                        command: [
                            {
                                name: "edit",
                                text: {
                                    edit: "",
                                    update: "Tamam",
                                    cancel: "İptal"
                                },
                                className: "grid-command-iconfix"
                            },
                            {
                                name: "destroy",
                                text: "",
                                className: "grid-command-iconfix"
                            }
                        ],
                        title: "&nbsp;",
                        width: "120px"
                    }
                ],
                editable: {
                    mode: "popup",
                    window: {
                        title: "Kayıt".i18n()
                    },
                    confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
                    confirmDelete: "Yes"
                },
                edit: function (e) {
                    console.log(e);
                    $("#maritalStatus").data("kendoDropDownList");
                }
            });
        }
    });

SS 的工作怎么样。它在弹出编辑菜单上显示状态，但不显示在网格上。

你能帮帮我吗？

Answer 1

您在模板中设置了复选框，而不是它的值。它将始终具有初始状态。试试这个模板：

template: "<input type='checkbox' id='isWorking' # if (isWorking) { # checked=\"checked\" # } # />"

Demo