Search results

Row Editing in JavaScript Tree Grid control

08 May 2023 / 1 minute to read

In Row edit mode, when you start editing the currently selected record, the entire row is changed to edit state. You can change the cell values of the row and save edited data to the data source. To enable Row edit, set the editSettings.mode as Row.

Copied to clipboard
import { TreeGrid, Edit, Toolbar } from '@syncfusion/ej2-treegrid';
import { sampleData } from './datasource.ts';

TreeGrid.Inject(Edit, Toolbar);

let treeGridObj: TreeGrid = new TreeGrid({
    dataSource: sampleData,
    childMapping: 'subtasks',
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' },
    treeColumnIndex: 1,
    columns: [
        { field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right'},
        { field: 'taskName', headerText: 'Task Name', width: 180 },
            field: 'startDate', headerText: 'Start Date', width: 90, textAlign: 'Right', editType: 'datepickeredit', type: 'date', format: 'yMd'
        { field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' }
    height: 270
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="" />
    <link href="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='TreeGrid'></div>