Edit types in Vue Treegrid component

7 Jun 20248 minutes to read

Cell edit type and its params

The columns.editType is used to customize the edit type of the particular column.
You can set the columns.editType based on data type of the column.

  • numericedit - NumericTextBox component for integers, double, and decimal data types.

  • defaultedit - TextBox component for string data type.

  • dropdownedit - DropDownList component for list data type.

  • booleanedit - CheckBox component for boolean data type.

  • datepickeredit - DatePicker component for date data type.

  • datetimepickeredit - DateTimePicker component for date time data type.

Also, you can customize model of the columns.editType component through the columns.edit.params.

The following table describes cell edit type component and their corresponding edit params of the column.

Component Example
NumericTextBox params: { decimals: 2, value: 5 }
TextBox -
DropDownList params: { value: ‘Germany’ }
Checkbox params: { checked: true}
DatePicker params: { format:’dd.MM.yyyy’ }
DateTimePicker params: { value: new Date() } 
<template>
<div id="app">
        <ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='270px' :editSettings='editSettings' :toolbar='toolbar'>
        <e-columns>
                <e-column field='taskID'  :isPrimaryKey='true'  headerText='Task ID'  width=90 textAlign='Right'></e-column>
                <e-column field='taskName' headerText='Task Name' editType= 'stringedit' width=170 ></e-column>
                <e-column field='startDate' headerText='Start Date' editType= 'datetimepickeredit' :edit='dateParams' :format='formatOptions' textAlign='Right' width=170></e-column>
                <e-column field='approved' headerText='Approved' editType= 'booleanedit' type='boolean' width=110 displayAsCheckBox='true' textAlign='Right'></e-column>
                <e-column field='progress' headerText='Progress' width=120 editType= 'numericedit' :edit='progressParams' textAlign='Right'></e-column>
                 <e-column field='priority' headerText='Priority' editType= 'dropdownedit'  width=110 textAlign='Right'></e-column>
                </e-columns>
        </ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";

import { TreeGridComponent as EjsTreegrid, Edit, Toolbar, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

const data = sampleData;

const toolbar = ['Add', 'Delete', 'Update', 'Cancel'];
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
const formatOptions = {type:'dateTime', format:'M/d/y hh:mm a'};
const dateParams = { params: {format: 'M/d/y hh:mm a' } };
const progressParams = { params: {format: 'n' } };

provide('treegrid',  [ Edit, Toolbar ]);

</script>
<template>
<div id="app">
        <ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='270px' :editSettings='editSettings' :toolbar='toolbar'>
        <e-columns>
                <e-column field='taskID'  :isPrimaryKey='true'  headerText='Task ID'  width=90 textAlign='Right'></e-column>
                <e-column field='taskName' headerText='Task Name' editType= 'stringedit' width=170 ></e-column>
                <e-column field='startDate' headerText='Start Date' editType= 'datetimepickeredit' :edit='dateParams' :format='formatOptions' textAlign='Right' width=170></e-column>
                <e-column field='approved' headerText='Approved' editType= 'booleanedit' type='boolean' width=110 displayAsCheckBox='true' textAlign='Right'></e-column>
                <e-column field='progress' headerText='Progress' width=120 editType= 'numericedit' :edit='progressParams' textAlign='Right'></e-column>
                 <e-column field='priority' headerText='Priority' editType= 'dropdownedit'  width=110 textAlign='Right'></e-column>
                </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>

import { TreeGridComponent, Edit, Toolbar, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";

export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,

},

  data() {
    return {
      data: sampleData,
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true,  mode: 'Row' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      formatOptions: {type:'dateTime', format:'M/d/y hh:mm a'},
      dateParams: { params: {format: 'M/d/y hh:mm a' } },
      progressParams: { params: {format: 'n' } },
    };
  },
    provide: {
    treegrid: [ Edit, Toolbar]
  }
}
</script>

If edit type is not defined in the column, then it will be considered as the stringedit type (Textbox component).