Command column editing in Vue Treegrid component
16 Mar 20236 minutes to read
The command column provides an option to add CRUD action buttons in a column. This can be defined by the column.commands
property.
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. |
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='270px' :editSettings='editSettings'>
<e-columns>
<e-column field='taskID' :isPrimaryKey='true' headerText='Task ID' width=90 textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
<e-column headerText='Manage Records' :commands='commands' width=80 textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Edit, CommandColumn } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data() {
return {
data: sampleData,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' },
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: {
treegrid: [ Edit, CommandColumn ]
}
}
</script>
Custom command
The custom command buttons can be added in a column by using the column.commands
property and
the action for the custom buttons can be defined in the buttonOption.click
event.
<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='270px' :editSettings='editSettings'>
<e-columns>
<e-column field='taskID' :isPrimaryKey='true' headerText='Task ID' width=90 textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
<e-column headerText='Commands' :commands='commands' width=120></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Edit, CommandColumn, IRow, Column } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
import { closest } from '@syncfusion/ej2-base';
Vue.use(TreeGridPlugin);
export default {
data() {
return {
data: sampleData,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' },
commands: [{ buttonOption: { content: 'Details', cssClass: 'e-flat', click: this.onClick } }]
};
},
provide: {
treegrid: [ Edit, CommandColumn ]
},
methods: {
onClick: function(args) {
let rowIndex: number = (closest(args.target as Element, '.e-row')).rowIndex;
let data: Object = this.$refs.treegrid.ej2Instances.getCurrentViewRecords();
alert(JSON.stringify(data[rowIndex]));
}
}
}
</script>