Seeking help in adding a checkbox column to a Kendo UI Vue grid. The column should display the values of a boolean field from the grid's data source. While I am aware of how to add a checkbox column for selection as demonstrated here: https://www.telerik.com/kendo-vue-ui/components/grid/selection/, it doesn't fit my requirements as I need the column to be bound to a specific data field.
The structure of my grid is as follows:
<kendo-grid v-once :data-source="myViewModel.gridDataSource">
<kendo-grid-column- :template="checkboxTemplate" :width="100" :sortable="false"></kendo-grid-column->
<kendo-grid-column field="Field 1" title="Field 1"></kendo-grid-column>
<kendo-grid-column field="Field 2" title="Field 2"></kendo-grid-column>
</kendo-grid>
The template html for the checkbox looks like this:
<template id="checkboxTemplate">
<input type="checkbox" id="exampleCheck1" />
</template>
In the Vue component, the checkbox template is defined as:
new Vue({
...
data: {
checkboxTemplate: this.checkBoxTemplate
}
...
The corresponding method being called is:
public get checkBoxTemplate() {
debugger;
// debugger gets hit, but I have no idea what to return here.
return new Object();
}
Currently, upon rendering the page, the grid column appears empty without the checkbox element:
<td role="gridcell"></td>
If anyone has insights on how to create and bind a checkbox column to a Vue datasource, please assist.