Contact Support
Command column editing in Vue Grid component
23 Jul 202415 minutes to read
The command column editing feature allows you to add CRUD (Create, Read, Update, Delete) action buttons in a column for performing operations on individual rows.This feature is commonly used when you need to enable inline editing, deletion, or saving of row changes directly within the grid.
To enable command column editing, you can utilize the column.commands property. By defining this property, you can specify the command buttons to be displayed in the command column, such as Edit, Delete, Save, and Cancel.
To utilize CRUD operations, you need to inject the CommandColumnService module into the @NgModule.providers section. This service provides the necessary functionalities for handling the command column actions.
The available built-in command buttons are:
Command Button | Actions |
---|---|
Edit | Edit the current row. |
Delete | Delete the current row. |
Save | Update the edited row. |
Cancel | Cancel the edited state. |
Here’s an example that demonstrates how to add CRUD action buttons in a column using the command
column property :
<template>
<div id="app">
<ejs-grid :dataSource='data' :editSettings='editSettings' height='310px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100 :validationRules='orderIDRules'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120 :validationRules='customerIDRules'></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2' :validationRules='freightRules'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150 :validationRules='shipCountryRules'></e-column>
<e-column headerText='Commands' width=120 :commands='commands' ></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns, Page, Toolbar, Edit, CommandColumn } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
const editSettings = { allowEditing: true, allowDeleting: true };
const orderIDRules= { required: true, number: true };
const freightRules= { required: true, min: 1, max: 1000 };
const customerIDRules= { required: true };
const shipCountryRules= { required: true };
const commands = [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
{ type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
{ type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },
{ type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }];
provide('grid', [Page, Edit, Toolbar, CommandColumn]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource='data' :editSettings='editSettings' height='310px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100 :validationRules='orderIDRules'></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120 :validationRules='customerIDRules'></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2' :validationRules='freightRules'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150 :validationRules='shipCountryRules'></e-column>
<e-column headerText='Commands' width=120 :commands='commands' ></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, Edit, CommandColumn } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data() {
return {
data: data,
editSettings: { allowEditing: true, allowDeleting: true },
orderIDRules: { required: true, number: true },
freightRules: { required: true, min: 1, max: 1000 },
customerIDRules: { required: true },
shipCountryRules: { required: true },
commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
{ type: 'Delete', buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' } },
{ type: 'Save', buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' } },
{ type: 'Cancel', buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' } }]
};
},
provide: {
grid: [Page, Edit, Toolbar, CommandColumn]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
Custom command column
The custom command column feature in the Grid component allows you to add custom command buttons in a column to perform specific actions on individual rows. This feature is particularly useful when you need to provide customized functionality for editing, deleting, or performing any other operation on a row.
To add custom command buttons in a column, you can utilize the column.commands property. Furthermore, you can define the actions associated with these custom buttons using the commandClick event.
Here’s an example that demonstrates how to add custom command buttons using the commands
property and customize the button click behavior to display grid details in a dialog using the commandClick
event:
<template>
<div id="app">
<ejs-grid :dataSource="data" :editSettings="editSettings" :commandClick="commandClick" height="400px">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="Right" editType="numericedit" width="120" format="C2"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-column>
<e-column headerText="Commands" width="140" :commands="commands"></e-column>
</e-columns>
</ejs-grid>
<ejs-dialog header="Row Information" :content="dialogContent" showCloseIcon="true" width="400px" :visible="dialogVisible" :close="dialogClose">
</ejs-dialog>
</div>
</template>
<script setup>
import { ref, provide } from "vue";
import { GridComponent as EjsGrid,ColumnDirective as EColumn,ColumnsDirective as EColumns,Page,Toolbar,Edit,CommandColumn } from "@syncfusion/ej2-vue-grids";
import { DialogComponent as EjsDialog } from "@syncfusion/ej2-vue-popups";
import { data } from "./datasource.js";
const editSettings = { allowEditing: true, allowDeleting: true };
const commands = [{ buttonOption: { content: "Details", cssClass: "e-flat" } }];
const dialogVisible = ref(false);
const dialogContent = ref("");
const commandClick = (args) => {
dialogContent.value = `
<p><b>OrderID:</b> ${args.rowData.OrderID}</p>
<p><b>CustomerID:</b> ${args.rowData.CustomerID}</p>
<p><b>Freight:</b> ${args.rowData.Freight}</p>
<p><b>ShipCountry:</b> ${args.rowData.ShipCountry}</p>`;
dialogVisible.value = true;
};
const dialogClose = () => {
dialogVisible.value = false;
};
provide("grid", [Page, Edit, Toolbar, CommandColumn]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource="data" :editSettings="editSettings" :commandClick="commandClick" height="400px">
<e-columns>
<e-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="100"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="Right" editType="numericedit" width="120" format="C2"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-column>
<e-column headerText="Commands" width="140" :commands="commands"></e-column>
</e-columns>
</ejs-grid>
<ejs-dialog header="Row Information" :content="dialogContent" showCloseIcon="true" width="400px" :visible="dialogVisible" :close="dialogClose">
</ejs-dialog>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Edit, CommandColumn } from "@syncfusion/ej2-vue-grids";
import { DialogComponent } from "@syncfusion/ej2-vue-popups";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid": GridComponent,
"e-columns": ColumnsDirective,
"e-column": ColumnDirective,
"ejs-dialog": DialogComponent,
},
data() {
return {
data: data,
editSettings: { allowEditing: true, allowDeleting: true },
commands: [{ buttonOption: { content: "Details", cssClass: "e-flat" } }],
dialogVisible: false,
dialogContent: ""
};
},
methods: {
commandClick(args) {
this.dialogContent = `
<p><b>OrderID:</b> ${args.rowData.OrderID}</p>
<p><b>CustomerID:</b> ${args.rowData.CustomerID}</p>
<p><b>Freight:</b> ${args.rowData.Freight}</p>
<p><b>ShipCountry:</b> ${args.rowData.ShipCountry}</p>`;
this.dialogVisible = true;
},
dialogClose() {
this.dialogVisible = false;
}
},
provide: {
grid: [Page, Edit, CommandColumn],
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>