Checkbox column in grid for Kendo UI for Vue

Question

I am trying to add a checkbox column to a grid for Kendo UI Vue. The column needs to reflect a boolean field in the grid datasource. I know I can add a checkbox column for selection as per here: https://www.telerik.com/kendo-vue-ui/components/grid/selection/, but this doesn't really suit as I need a column bound to a datasource field.

My grid looks like this:

<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 html for the template looks like this:

<template id="checkboxTemplate">
    <input type="checkbox" id="exampleCheck1" />
</template>

A checkbox template is defined in the Vue component as:

    new Vue({
        ...
        data: {
           checkboxTemplate: this.checkBoxTemplate
        }
        ...

And the method it calls is:

public get checkBoxTemplate() {
    debugger;
    // debugger gets hit, but I have no idea what to return here.
    return new Object();
}

For far, when the page renders the grid column is completely empty, no checkbox just an empty td element:

<td role="gridcell"></td>

Does anyone know what I have to do here to create a checkbox column and bind it to a field in the Vue datasource?

himawan_r himawan_r · Accepted Answer · 2018-04-30T15:55:04

I Just wanted to share (this may not be the answer),

but for some reason the data-bind="checked:Discontinued" does not work as the column template, but it does work as editTemplate. i tried it on their example here, where you could see there

the same <input type="checkbox" data-bind="checked:Discontinued"/> used

but the behavior is different on edit mode. The same goes for

<input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />

therefore i conclude data-bind doesn't work when not on edit mode (Or i don't know how yet)

The workaround if you wanted only to show / read-only is using a conditional to check/uncheck the checkbox like

<input type="checkbox" disabled="true" name="Discontinued" # if(Discontinued){ # checked # } # />

but since it's not bound to the datasource this is act just like read only. any changes made will not affect the datasource. You still need to toggle to edit mode to edit.

please check this solution

Checkbox column in grid for Kendo UI for Vue

1 Answers