无法将单选按钮添加到 Kendo UI 网格

Question

我试图在我的剑道网格中有一组 3 个单选按钮（每个按钮在不同的列但在同一行）但没有成功。我查看了 Kendo RowTemplate 文档，但它并没有指导我找到任何解决方案。 它适用于复选框，但是当我将模板更改为“收音机”类型时，它会在我单击编辑按钮的第二个更改为复选框。有什么想法吗？ 下面是我的 kendoGrid 属性，我将 ** 放在字段属性中的“模板”行旁边。

div.kendoGrid({
                    dataSource:
                    {   error: function (e) {
                                    alert("An error occured: "+ e.xhr.responseText);
                                    this.cancelChanges();
                                },
                        type:"json",
                        transport: {
                            read: {
                                url: "/users/read",
                                cache: false,                        
                                dataType: "json"
                            },
                            update: {
                                url: function(user){
                                    var grid = $("#grid").data("kendoGrid");
                                    var model = grid.dataItem(grid.select());
                                    var roleIs;
                                    if (user.Admin) {
                                        roleIs="admin"
                                    }
                                    else if (user.Manager) {
                                        roleIs="manager"
                                    }
                                    else if (user.User) {
                                        roleIs="user"
                                    };
                                    return  "users/update/"+model.id+"/"+roleIs+"/"+user.name
                                },
                                type: "PUT"
                            },
                            destroy: {
                                url: function(user){
                                    return  "/users/destroy/"+user.id+"/"+user.name
                                    },
                                    type: "DELETE"
                            },
                            create: {
                                url: function(user){

                                    var roleIs;
                                    if (user.Admin) {
                                        roleIs="admin"
                                    }
                                    else if (user.Manager) {
                                        roleIs="manager"
                                    }
                                    else if (user.User) {
                                        roleIs="user"
                                    };
                                    return  "users/create/"+user.login+"/"+user.name+"/"+roleIs+"/"
                                },
                                type: "POST"
                            },
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        schema: {

                            model: 
                            { id: "id",
                                fields: {
                                    id:{ type: "number",editable: false},
                                    role:{ type: "string"},
                                    login: { type: "string",editable: false},
                                    name:{type: "string",editable: false},
                                    Admin: { type: "boolean"},
                                    Manager: { type: "boolean"},
                                    User: { type: "boolean"}
                                }
                            }
                        },
                        pageSize: 30,
                        serverPaging: false,
                        serverFiltering: false,
                        serverSorting: false
                    },

                    selectable: "row",
                    navigatable: true,
                    pageable: true,
                    height: 400,
                    columns: [//{field: "id"},
                        {
                        field: "name",
                        title:"User Name",
                        filterable: true,
                        nullable: false,
                        editable: false
                        },{
                            field: "Admin",
                            **template: '<input type="checkbox"  #= Admin ? "checked=checked" : "" # disabled="disabled"></input>'**,
                            width: 75
                        },{
                            field: "Manager",
                            **template: '<input type="checkbox"  #= Manager ? "checked=checked" : "" # disabled="disabled"></input>'**,
                            width: 75
                        },{
                             field: "User", 
                             **template: '<input type="checkbox"  #= User ? "checked=checked" : "" # disabled="disabled"></input>',**
                             width: 75
                        },{
                             command: ["edit", "destroy"], title: "", width: "195px"
                        }],
                    editable:{mode: "inline"} 
                });
    }
}

}

Answer 1

编辑的格式由columns.editor控制

您需要编写一个编辑器函数，将input 定义为单选按钮。