We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Checkbox binding with custom template


I am using a custom template in a data grid to edit row content in Dialog mode. Binding works fine for all edit types other than check boxes. If I use the ejs-checkbox component, binding does not work: modified check box value in edit dialog is not reflected in grid after save. If I use a simple <input type="checkbox" ...> element, then it works fine. 

Here is the working template entry: 

            <div class="form-row">
                <div class="form-group col-md-12">
                    <label for="active">
                        <input class="e-field e-boolcell e-control e-checkbox e-lib" type="checkbox" name="active" id="active" v-model="data.active" :checked="data.active">
                        <span class="e-label">Active</span>

Here is the non-working template entry:

            <div class="form-row">
                <div class="form-group col-md-12">
                    <ejs-checkbox class="e-field e-boolcell e-control e-checkbox e-lib" id="active" name="active" label="Active" v-model="data.active" e-mappinguid="grid-column5" floatLabelType="Right" :checked="data.active"></ejs-checkbox>

Thanks in advance,

1 Reply

VB Vinitha Balasubramanian Syncfusion Team January 11, 2023 06:24 AM UTC

Hi Claude,

Thank you for reaching out to Syncfusion support.

Query : Checkbox binding with custom template

Based on your query, we have prepared a sample using checkbox component for dialog template. You can access it through the link provided below.

Sample : https://codesandbox.io/s/vue-template-forked-i5zbm9?file=/src/App.vue

Note : Please make sure to also import the checkbox plugin for the button component for the sample to work.


Vinitha Balasubramanian

Live Chat Icon For mobile
Up arrow icon