kendo ui - Adding bindeable checkbox column to grid

Question

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.

Answer 1

There are some previous considerations:

1. When you click in a cell for editing you are switching it to edit mode and then is when editor function get executed.
2. If you are not in edition mode despite of the HTML used, the changes are not transferred in the model.
3. Kendo UI render boolean as checkboxes for editing but not while not in edit mode.

What you need to do is:

1. Define a template for displaying a checkbox.
2. 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