Unable to add radio buttons to Kendo UI grid

Question

I'm trying to have a group of 3 radio buttons (each button in different column but the same row) in my Kendo grid but without success. I looked at the Kendo RowTemplate doc, but it's not directing me to any solution. it works fine with checkboxes, but when i change the template to "radio" type, it changes to checkbox the second I click the edit button. any thoughts? below is my kendoGrid properties, I put ** next to the 'template' line in the field property.

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

The formatting for edition is controlled by columns.editor

You need to write an editor function that defines the input as a radio button.