Checkbox binding with custom template

[Claude]

Hi,

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>

                    </label>

                </div>

            </div>



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>

                </div>

            </div>

Thanks in advance,
Claude

[Vinitha Balasubramanian]

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.

Regards,

Vinitha Balasubramanian