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 a

Answer 1

Updated example for 2018!!

with themes. Kendo uses Themes so using the standard "browser-checkbox-look" (different in every browser) is not so nice.

https://dojo.telerik.com/IluJosiG/14

$(document).ready(function () {
     
                    $("#grid").kendoGrid({
                        dataSource: {
                          transport: {
                    				read: function(options){
                              var data = [
                                {
                                	include: true,
                                  Amount: 20
                                },
                                {
                                	include: true,
                                  Amount: 30
                                },
                                {
                                	include: false,
                                  Amount: 0
                                }
                              ];
                            	options.success(data);
                            }
                          },
                          schema:{
                            model: {
                              fields: {
                                include: { type: 'boolean' },
                                Amount: { type: "number", },
                              }
                            }
                          }
                        },
                        columns: [
                            { 
                              field: "include", 
                              editor: function(container, options){

                                var grid = $(container).closest('[data-role=grid]').data('kendoGrid');
                                var row = grid.dataItem(container.closest('tr'));

                                //console.log('grid', grid);
                                console.log('row', row);
                                if(row.include){
                                  row.set('include', false);
                                  row.set('Amount', 0);
                                } else {
                                	row.set('include', true);
                                  row.set('Amount', 1);
                                }

                                grid.closeCell();
                              },
                              template: function(items){
                                var guid = kendo.guid();
                                
                                var checked = ''; // = ' disabled="disabled" ';
                                if(items.include){
                                  checked = ' checked="checked" ';
                                }
                                return '' + 
                                  '​';
                              },
                              attributes:{ align:"center" },
															headerAttributes: { 'class': 'k-header-centeralign' }
                            },
                          {
                            field: "Amount",
                            format: "{0:n6}",
                            editor: function(container, options){
                            	$('')
                                .appendTo(container)
                                .kendoNumericTextBox({
                                  decimals: 6,
                                  min: 0,
                                  restrictDecimals: true // Specifies whether the decimals length should be restricted during typing. The length of the fraction is defined by the decimals value
                                }
                              );
                            }
                          }
                        ],
                        editable: true,
                      	save: function(e){
                      		console.log('save', e);
			
                          var model = e.model;
                          console.log('save model', model);

                          var items = this.dataSource.data();
                          var item = $.grep(items, function(e){ return e.uid == model.uid; })[0];
                          //console.log('item uid', items);

                          var userAmount = e.values.Amount;

                          if(userAmount>0){
                            item.set('include', true);
                            console.log('set include true');
                          } else {
                            item.set('include', false);
                            console.log('set include false');
                          }
                          
                          // redraw row for checkbox
                          // timeout because qty is not updated before
                          var grid = e.sender;
                          setTimeout(function(){
                            var row = grid.element.find('tr[data-uid=' + model.uid + ']');
                            console.log('redraw row for checkbox', row);
                            kendoFastReDrawRow(grid, row);
                          },0);
                          
                        },
                        dataBound: function(e){
                          console.log('dataBound');
                        },
                    });
                });

              
            function kendoFastReDrawRow(grid, row) {
	var dataItem = grid.dataItem(row);
	var rowChildren = $(row).children('td[role="gridcell"]');
	for (var i = 0; i < grid.columns.length; i++) {
		var column = grid.columns[i];
		var template = column.template;
		var cell = rowChildren.eq(i);
		if (template !== undefined) {
			var kendoTemplate = kendo.template(template);
			// Render using template
			cell.html(kendoTemplate(dataItem));
		} else {
			var fieldValue = dataItem[column.field];
			var format = column.format;
			var values = column.values;
			if (values !== undefined && values != null) {
				// use the text value mappings (for enums)
				for (var j = 0; j < values.length; j++) {
					var value = values[j];
					if (value.value == fieldValue) {
						cell.html(value.text);
						break;
					}
				}
			} else if (format !== undefined) {
				// use the format
				cell.html(kendo.format(format, fieldValue));
			} else {
				// Just dump the plain old value
				cell.html(fieldValue);
			}
		}
	}
}

td[role=gridcell] .k-checkbox + label.k-checkbox-label {
	cursor: pointer !important;
	
}