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

Answer 2

I had the same problem with my batch edited grid. The solutions I found were only for one specific column (as the solution mentioned above). So I changed

item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0); 

to

var col = $(this).closest('td'); dataItem.set(grid.columns[col.index()].field, checked); 

So you can use it for any checkbox columns.

The next problem was the dirty flag which is not set correctly when using the "one click edit" option of checkbox.

So I've tested various things to get it work and endet up with this:

In column definition:

.ClientTemplate("<input type='checkbox' #= CheckboxColumn? checked='checked': checked='' # class='chkbx' />"); 

And script below:

<script>     $(function () {         $('#GridName').on('click', '.chkbx', function () {             var checked = $(this).is(':checked');             var grid = $('#GridName').data().kendoGrid;             grid.closeCell();             var dataItem = grid.dataItem($(this).closest('tr'));             var col = $(this).closest('td');             grid.editCell(col);             dataItem.set(grid.columns[col.index()].field, checked);             grid.closeCell(col);         });     }); </script>