I have a simple grid, with one command button. I'm trying to use the code that is show in your documentation to hide the command button conditionally, based on the data in the grid. However either the "visible" property has no effect, or an error is generated in the console.
The column is defined as:
{
command: [{
name: 'deleteNote',
click: deleteNote,
field: 'ID',
template: "<a class='btn btn-xs btn-danger k-grid-deleteNote'><i class='fa fa-trash-o'></i></a>",
visible: function (dataItem) { return false }
}],
width: "60px",
headerAttributes: {
style: "text-align: center; white-space: normal;",
"class": "k-text-center !k-justify-content-center"
},
attributes: {
style: "text-align: center",
"class": "k-text-center"
},
},The visible property has a simple value in this case for testing. When run, this just produces a template error in the console
Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'><td style="text-align: center"class="k-text-center" class="k-command-cell" role='gridcell'>#= function (dataItem) { return false }(data)? '<a class='btn btn-xs btn-danger k-grid-deleteNote'><i class='fa fa-trash-o'></i></a>':'' #</td><td role='gridcell'><span class='DoctorNoteDate'>#: NoteDateTime #</span></td><td class="#= data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? ' k-dirty-cell' : '' #" role='gridcell'>#= data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? '<span class="k-dirty"></span>' : '' ##:data.DoctorNotes==null?'':data.DoctorNotes#</td></tr>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='<tr data-uid="'+(data.uid)+'" role=\'row\'><td style="text-align: center"class="k-text-center" class="k-command-cell" role=\'gridcell\'>'+( function (dataItem) { return false }(data)? '<a class='btn btn-xs btn-danger k-grid-deleteNote'><i class='fa fa-trash-o'></i></a>':'' )+'</td><td role=\'gridcell\'><span class=\'DoctorNoteDate\'>'+$kendoHtmlEncode( NoteDateTime )+'</span></td><td class="'+( data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? ' k-dirty-cell' : '' )+'" role=\'gridcell\'>'+( data && data.dirty && data.dirtyFields && data.dirtyFields['DoctorNotes'] ? '<span class="k-dirty"></span>' : '' )+''+$kendoHtmlEncode(data.DoctorNotes==null?'':data.DoctorNotes)+'</td></tr>';}return $kendoOutput;'
at Object.compile (kendo.web.js:198:31)
at Object.proxy [as template] (bootstrap?v=ORM1cEjHBVjtwT2V5nbx1jvidFiV26D1Qpa8Hqke8801:538:14)
at init._tmpl (kendo.web.js:55136:37)
at init._templates (kendo.web.js:55229:45)
at new init (kendo.web.js:51117:22)
at HTMLDivElement.<anonymous> (kendo.web.js:2440:36)
at Function.each (bootstrap?v=ORM1cEjHBVjtwT2V5nbx1jvidFiV26D1Qpa8Hqke8801:400:23)
at jQuery.fn.init.each (bootstrap?v=ORM1cEjHBVjtwT2V5nbx1jvidFiV26D1Qpa8Hqke8801:165:17)
at e.fn.<computed> [as kendoGrid] (kendo.web.js:2439:30)
at Object.success (TestDetailPopup.js?ver=1.0.0.12:384:31)
How do I make a command button hide conditionally? (I tried making the template for the button a function returning a string, but I could not access the underlying data, so could not make a proper comparison)
I tried to replicate the issue locally but to no avail.
I have prepared a Dojo example based on the provided information. As you will see, the custom command is displayed without any issues.
May I ask you to prepare and send us a runnable example where the issue is replicated? If it is easier for you you could modify the Dojo linked above. This will help us to inspect the issue locally and provide further assistance.
Regards,
Neli