Get checkbox value on change to update the backend value using commandClick on Save

[Ali]

Hi there,

In my Vue app, I have a Grid component with Command Column to perform CRUD actions in a checkbox column. 

I wondered how can I get the checkbox value as it is editing, and get the latest value to update my backend value on save.

<template>

<account-layout :active="3">

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

<div>

<ejs-grid ref="grid" id="grid" :dataSource="users" :detailTemplate="'detailTemplate'"

class="sortingenabled" :allowPaging='true' :allowSorting='true' :sortSettings='initialSort'

:pageSettings='pageSettings' :editSettings='editSettings' :toolbar='toolbar'

:recordClick="recordClick" :commandClick='commandClick'>

<e-columns>

<e-column field='username' headerText='Username' width='125' textAlign='Center'

:allowEditing='false'></e-column>

<e-column field='createdAt' headerText='Registration Date' width='135' textAlign='Center'

format='yMd' :allowEditing='false'></e-column>

<e-column field='verified' headerText='Verified' width='100' editType='booleanedit'

:edit='boolParams' displayAsCheckBox='true' type='boolean' textAlign='Center'></e-column>

<e-column headerText='Manage Records' width='160' :commands='commands'></e-column>

</e-columns>

<template v-slot:detailTemplate="users">

<table class="detailtable" width="100%">

<colgroup>

<col width="35%">

<col width="35%">

<col width="30%">

</colgroup>

<tbody>

<tr>

<td>

<span style="font-weight: 500;">Email: </span> {{ users.data.email }}

</td>

<td>

<span style="font-weight: 500;">Phone Number: </span>

{{ users.data.phone_number }}

</td>

</tr>

</tbody>

</table>

</template>

</ejs-grid>

</div>

</div>

</account-layout>

</template>

<script>

import { mapActions, mapState } from 'pinia';

import { useUserStore } from '../../../store/UserStore';

import DataLayout from "../../../components/Layouts/DataLayout.vue";

import { DetailRow, Edit, Sort, Page, Toolbar, CommandColumn } from "@syncfusion/ej2-vue-grids";

export default {

components: {

DataLayout,

},

provide: {

grid: [DetailRow, Edit, Sort, Page, Toolbar, CommandColumn]

},

async created() {

this.getUsers();

this.updateUser();

},

data: () => {

return {

initialSort: {

columns: [

{ field: 'username', direction: 'Ascending' },

]

},

pageSettings: { pageCount: 3 },

toolbar: ["Search"],

editSettings: { allowEditing: true, showDeleteConfirmDialog: true },

commands: [

{ type: 'Edit', buttonOption: { iconCss: ' e-icons e-edit', cssClass: 'e-flat', } },

{ type: 'Delete', buttonOption: { iconCss: 'e-icons e-delete', cssClass: 'e-flat' } },

{ type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },

{ type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }

],

};

},

methods: {

...mapActions(useUserStore, ['getUsers']),

...mapActions(useUserStore, ['updateUser']),

recordClick: async function (args) {

console.log(this.$refs.grid.ej2Instances)

console.log(args)

},

commandClick: async function (args) {

if (args.commandColumn.type === 'Edit') {

}

if (args.commandColumn.type === 'Save') {

try {

await this.updateUser({

id: args.rowData.id,

verified: args.rowData.verified, // HERE NEED TO GET THE UPDATED CHECKBOX VALUE

});

} catch (error) {

console.log("Error! Could not update the user verification status!", error);

}

}

},

},

computed: {

...mapState(useUserStore, ['users']),

},

}

</script >

<style>

@import "../../../../node_modules/@syncfusion/ej2-base/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-buttons/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-calendars/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-inputs/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-navigations/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-popups/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";

@import "../../../../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";

</style>

[Rajapandi Ravi]

Hi Ali,

Greetings from Syncfusion support

You can get the current updated value of checkbox by using the below code, so we suggest you use the below way to achieve your requirement.

 

commandClick: function (args) {

        if (args.commandColumn.type === 'Save') {

            //here you can get the updated value of checkbox and set it to the rowData then use the updated data as per your requirement

            args.rowData.Verified = args.target.closest('tr').querySelector('.e-boolcell').querySelector('.e-checkbox').ej2_instances[0].checked;

            console.log(args.rowData); 

        }

    }

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/180356-1641287052.zip

Regards,

Rajapandi R

[Ali]

Thanks Rajapandi R,

I must admit that it was not a straightforward and easy to find solution for me.

However, I have achieved what I was looking for in a different way (using actionBegin instead of commandClick), as follows:

actionBegin: async function (args) {

if (args.requestType === "save" && args.action === "edit") {

if (args.previousData["verified"] !== args.data["verified"]) {

try {

await this.updateUser({

id: args.data.id,

verified: args.data.verified

});

} catch (error) {

console.log("Error! Could not update the user verification status!", error);

}

}

}

},

[Rajapandi Ravi]

Ali,

Thank you for sharing the solution that you have tried.

Please get back to us if you need further assistance.