How to make “add new record” represent field as checkbox - Kendo Grid

Question

I am trying to add a new record to a kendo grid (only using client side javascript) and I can only get all the fields represented as text fields.

One of the fields however is actually a boolean and I would like it to be represented as a check box instead. Does anyone know how to do this?

Can anyone please help? Any help would be greatly appreciated.

UPDATED with code below. Also I tried the template suggestion but this is not working when I click on the Add New Record button at the top of the grid. I get a JavaScript error "primary is not defined"

$("#phoneGrid").kendoGrid({
                            columns: [
                                {
                                    field: "type",
                                    title: "Type"
                                },
                                {
                                    field: "primary",
                                    title: "Primary",
                                    template: "<input type=\"checkbox\" #= primary ? checked='checked' : '' #/>"
                                },
                                {
                                    field: "number",
                                    title: "Number"
                                },
                                { command: ['edit'], title: ' ' }
                            ],
                            editable: "inline",
                            dataSource: {
                                data: patientDetailUpdateViewModel.phones,
                                schema: {
                                    model: { id: "id" }                                    
                                }
                            },
                            toolbar: ['create'],
                            save: function (e) {
                                //alert("Save Event Triggered");
                                if (e.model.isNew()) {
                                    phone = new Phone();
                                    //Give the phone an id to uniquely identify it, but one which would signify a new phone instance (negative phone instance).
                                    phone.id = patientDetailUpdateViewModel.phones.length * -1;
                                    e.model.id = phone.id;//So isNew() will return false on subsequent calls. 
                                    phone.type = e.model.type;
                                    phone.primary = e.model.primary;
                                    phone.number = e.model.number;
                                    patientDetailUpdateViewModel.phones.push(phone);
                                    //alert("isNew() = true");
                                }
                            }
                        });

Answer 1

You can use template for column definition:

{     
  field: "ColumName",
  template: '<input type="checkbox" #= Column? checked="checked" : "" # disabled="disabled" ></input>'
}

EDIT:

Try to define data source model ( http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model ) like below, but according to your data types in source:

schema: {
    model: {
      id: "ProductID",
      fields: {
        type: {
          type: "string"
        },
        UnitPrice: {
          type: "number"
        }
      }
    }
}