Edit types in EJ2 JavaScript Treegrid control

27 Apr 202313 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() } 
ej.treegrid.TreeGrid.Inject(ej.treegrid.Edit, ej.treegrid.Toolbar);

var treeGridObj = new ej.treegrid.TreeGrid({
    dataSource: sampleData,
    childMapping: 'subtasks',
    toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' },
    treeColumnIndex: 1,
    columns: [
        {
            field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', width: 100
        },
        {
            field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 170
        },
        {
            field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 180,
            editType: 'datetimepickeredit', edit: { params: { format: 'M/d/y hh:mm a' } },
            format: { format: 'M/d/y hh:mm a', type: 'dateTime' }
        },
        {
            field: 'approved', headerText: 'Approved', width: 110, editType: 'booleanedit',
            type: 'boolean', displayAsCheckBox: true
        },
        {
            field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120,
            editType: 'numericedit', edit: { params: { format: 'n' } }
        },
        { field: 'priority', headerText: 'Priority', width: 110, editType: 'dropdownedit' }
    ],
    height: 270
});

treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Tree Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Tree Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <!-- Syncfusion Essential JS 2 Styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="TreeGrid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

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

Cell edit template

The cell edit template is used to add a custom component for a particular column by invoking the following functions:

  • create - It is used to create the element at the time of initialization.

  • write - It is used to create the custom component or assign default value at the time of editing.

  • read - It is used to read the value from the component at the time of save.

  • destroy - It is used to destroy the component.

ej.treegrid.TreeGrid.Inject(ej.treegrid.Edit, ej.treegrid.Toolbar);

var elem;
var autoCompleteObj;
var treeGridObj = new ej.treegrid.TreeGrid({
    dataSource: sampleData,
    childMapping: 'subtasks',
    treeColumnIndex: 1,
    height: 400,
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        mode: 'Cell',
        newRowPosition: 'Below'
    },
    toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
    columns: [
        {
            field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', width: 90
        },
        { field: 'taskName', headerText: 'Task Name', editType: 'stringedit', edit: {
            create: function(){
                    elem = document.createElement('input');
                    return elem;
                },
            read: function() {
                    return autoCompleteObj.value;
                },
            destroy: function() {
                    autoCompleteObj.destroy();
                },
            write: function(args){
                    autoCompleteObj = new ej.dropdowns.AutoComplete({
                        dataSource: treeGridObj.grid.dataSource,
                        fields: { value: 'taskName' },
                        value: args.rowData[args.column.field]
                });
                autoCompleteObj.appendTo(elem);
            }
            },
            width: 180  },
        { field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit', type: 'date', format: 'yMd' },
        {
            field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 80, editType: 'numericedit', edit: { params: {  format: 'n'}}
        }
    ]
});

treeGridObj.appendTo('#TreeGrid');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Tree Grid</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Tree Grid Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <!-- Syncfusion Essential JS 2 Styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/material.css">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div id="TreeGrid"></div>        
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>