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

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

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.

<account-layout :active="3">
<div class="col-lg-12 control-section">
<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-column field='username' headerText='Username' width='125' textAlign='Center'
<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>
<template v-slot:detailTemplate="users">
<table class="detailtable" width="100%">
<col width="35%">
<col width="35%">
<col width="30%">
<span style="font-weight: 500;">Email: </span> {{ users.data.email }}
<span style="font-weight: 500;">Phone Number: </span>
{{ users.data.phone_number }}

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: {
provide: {
grid: [DetailRow, Edit, Sort, Page, Toolbar, CommandColumn]
async created() {
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) {
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 >

@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";

3 Replies 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team February 6, 2023 01:01 PM UTC

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;





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


Rajapandi R

Marked as answer

AL Ali February 6, 2023 01:19 PM UTC

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);

RR Rajapandi Ravi Syncfusion Team February 8, 2023 05:20 AM UTC


Thank you for sharing the solution that you have tried.

Please get back to us if you need further assistance.

Live Chat Icon For mobile
Up arrow icon