Kendo style checkbox in grid template column

[Robert Madrian]

Hello,

I use a template column to have a Kendo style Checkbox in my grid but this is not bind to the underlying boolean value...
with a "normal" Checkbox this is possible with JavaScript but the tsyled Checkbox uses a Label for Styling... (see Picture)

how to do this with the styled checkboxes?

 

[Stefan]

Hello, Robert,

In our jQuery example, we have a function which is using the necessary elements in order to bind the Kendo UI styled checkbox column with the data:

https://demos.telerik.com/kendo-ui/grid/editing

function customBoolEditor(container, options) {
                    var guid = kendo.guid();
                    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label" for="' + guid + '">​</label>').appendTo(container);
                }

If the issue still occurs, please share with us the code used for the checkbox column and we will gladly assist further.

Regards,
Stefan
Progress Telerik

[wedaka]

/*
* Kendo grid initial function
*/
self.initWhiteLabelKendo = function(){

/*
* grod options
*/
self.opts.options = {
column: [
{
field: 'Name',
title: 'A Name',
width: '15%',
filterable: false,
template: '# if( _data.ParentID != null ){#<span class="span"> > #: _value # </span>#}else{ #<span class="span"> #: _value # </span># } #'
},
{
field: 'ChainsServiceName',
title: 'Name of the chain',
width: '20%',
filterable: false,
template: '# if( _value ){# #for (var i = 0,len = _value.length; i<len; i++){ # <span class="d-block"> #: _value[i] # </span> # } # #} #'
//template: '#= JSON.stringify(_value) #'
},
{
field: 'AltName',
title: 'Name of WL',
width: '25%',
filterable: false
},
{
field: 'AltDescription',
title: 'Description at WL',
width: '35%',
filterable: false
},
{
field: 'Active',
title: 'active',
width: '5%',
filterable: false,
attributes: {
class: 'text-center'
},
template: '<span class="d-block d-sm-none kgrid-label-mobile label">#: _title #:</span><span class="span"># if( _value && _value != "" ){# <i class="fas fa-check-circle"></i> #}else{# <i class="fas fa-check-circle uncheck-circle"></i> #} #</span>',
editor: function(container, options){
var guid = kendo.guid();
$('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Active" data-type="boolean" data-bind="checked:Active">').appendTo(container);
$('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
console.log(options, 'guid');
}
},
{
field: 'GroupName',
hidden: true,
'menu': false,
groupHeaderTemplate: '#= data.value ? data.value : "Un Grouped Services" #',
}
],  
mobile: false,
sortable: false,
editable: false,
scrollable: false,
filterable: false,
pageable: false,
groupable: false,
isServerside: false,
isGroupGrid: false,
dataMap: {
'URL': self.CONSTANTS.REST.WHITELABELS.GROUP.READ.replace('{WhiteLabelID}', 1) + 'EN',
'method': 'GET',
'mapResponce': 'Services'
},
groupField: [{field: 'GroupName'}],
dataSourceConfig: {
pageSize: 200000,
batch: true,
schema: {
model: self.gnServiceSchema()
},
},
callback: 'callbackGridData',
};
self.update();
};
/*
* Dynamic Column Generate for the modal
*/
self.gnServiceSchema = function(){
var model = {},
fields = {};
fields['Name'] = { type: 'string', editable: false};
fields['ChainsServiceName'] = { editable: false};
fields['AltName'] = { type: 'string', editable: true};
fields['AltDescription'] = { type: 'string', editable: true};
fields['Active'] = { type: 'boolean', editable: true };
fields['GroupName'] = { type: 'string', editable: true, groupHeaderTemplate: '#: _value #' };
model.id = 'ID';
model.fields = fields;
return model;
};

I have same problem here. 

[Konstantin Dikov]

Hi Wedaka,

The same custom editor is used in the following online demo and it rendered the checkbox correctly:

• https://demos.telerik.com/kendo-ui/grid/editing

Please note that the demo is using the latest version and if you are using version prior to R2 2017, the checkbox editor will not work. If you are using newer version and you are still observing the issue, please create a dojo example replicating it, so we can test it locally:

• https://dojo.telerik.com/URoBatES/2

Best Regards,
Konstantin Dikov
Progress Telerik

[Riley]

Jumping in on this thread... how do we fix the checkbox template to show a kendo checkbox instead of true/false? 

[Viktor Tachev]

Hi Riley,

 

By default the Grid will use the editors that are located in the ~/Views/Shared/EditorTemplates folder. If you would like to specify an editor that will be used for a given type you need to add a partial view in the EditorTemplates folder. The name of the View should match the name of the type.

 

Since the checkbox will be used with boolean fields the editor for it will be named Boolean.cshtml. The code snippet below shows its definition:

@model bool?

@using Kendo.Mvc.UI

@Html.Kendo().CheckBoxFor(m => m)

Regards,
Viktor Tachev
Progress Telerik