checkbox on edit

[hai shi tan]

const codeRules = ref({

    required: true});

const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Top', mode: 'Dialog', template: 'dialogTemplate'};

function actionBegin(args: any) {

...

    } else if (args.requestType === 'save') {

      console.debug('save args.data', args.data)

1. in my console.debug, the args.data.active doesn't update on edit, on check or uncheck the checkbox.

- in the community forum the same topic thread disscussed in 2023, i just wonder is this the same a bug?

https://www.syncfusion.com/forums/180356/get-checkbox-value-on-change-to-update-the-backend-value-using-commandclick-on-save

2. how to change add and edit header dialog? the standard display is "Detail of <id>"

<template>

    <div class="col-lg-12 control-section">

        <GridComponent

            ref="grid"

            :dataSource="data"

            allowPaging="true"

            :pageSettings="pageSettings"

            allowSorting="true"

            allowFiltering="true"

            :filterSettings="filterSettings"

            :editSettings="editSettings"

            :toolbar="toolbar"

            :actionComplete="actionComplete"

            :actionBegin="actionBegin"

            :rowDataBound="rowDataBound"

        >

            <ColumnDirective field="code" headerText="Code" width="120"

                :validationRules="codeRules" :isPrimaryKey="true"></ColumnDirective>

            <template v-slot:dialogTemplate="{ data }">

                <div>

                <div class="form-row">

                    <div class="form-group col-md-6">

                        <CheckBoxComponent

                            id="active"

                            label="Active"

                            floatLabelType="Always"

                            v-model="data.active"

                            cssClass="ejs-required"

                        ></CheckBoxComponent>

                    </div>

                </div>

            </template>

        </GridComponent>

    </div>

</template>

<style></style>

[hai shi tan]

I had the #2 fixed with  headerTemplate.

[Santhosh Iruthayaraj]

Hi hai shi tan,

Greetings from Syncfusion Support.

We are pleased to hear that you have resolved your second query. Regarding your first query, the editors within the dialog template rely on the “name” attributes assigned to them for updating the corresponding fields. To ensure the edited values are correctly updated in the respective columns, please verify that the “name” attribute of the editor matches the associated field name.

For your reference, please find the following code snippet and sample:

[App.vue]

 

      <template v-slot:dialogTemplate="{ data }">

        <div>

          <div class="form-row">

            <div class="form-group col-md-6">

              <CheckBoxComponent

                id="active"

                name="active"

                label="Active"

                floatLabelType="Always"

                v-model="data.active"

                cssClass="ejs-required"

              ></CheckBoxComponent>

            </div>

          </div>

        </div>

      </template>

 

Sample: https://stackblitz.com/edit/xxanjtsr

Please let us know if you require any further assistance.

Regards,

Santhosh I