Adding bindeable checkbox column to grid

kendo-grid, kendo-ui

Solution

There are some previous considerations:

- When you click in a cell for editing you are switching it to edit mode and then is when editor function get executed.

- If you are not in edition mode despite of the HTML used, the changes are not transferred in the model.

- Kendo UI render `boolean` as checkboxes for editing but not while not in edit mode.

What you need to do is:

- Define a template for displaying a checkbox.

- If you do not want to click twice the checkbox (the first to enter edit mode and the second to change it's value), you need to define a checkbox but bind a change event that intercepts clicks on it and change the model.

Template definition:

{
    title   : "Fully Paid",
    field   : "fullyPaid",
    template: "<input name='fullyPaid' class='ob-paid' type='checkbox' data-bind='checked: fullyPaid' #= fullyPaid ? checked='checked' : '' #/>"
}

As you can see I'm not defining an editor function since we will change the value of the checkbox without entering in edition mode.

Define a handler that detect changes in the checkbox that I defined in the template and update the model.

grid.tbody.on("change", ".ob-paid", function (e) {
    var row = $(e.target).closest("tr");
    var item = grid.dataItem(row);
    item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
});

Your JSBin modified here : http://jsbin.com/ebadaj/12/edit

Problem

Have this column in a Kendo grid that currently display a MySQL Boolean value so we have either 1 or 0. Made this demo to play on... This in an autosync and inline:true grid. I would like this column to be of type "Checkbox" but, for some weird reasons, i just cannot find a demo or an example on the web that displays "enabled" checkbox that changes 1 to 0 when unchecked and Vice-Versa.

Original source