Command column editing in React Treegrid component

27 Jan 202313 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.

app.jsx

import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const commands = [
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' },
            type: 'Edit',
        },
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' },
            type: 'Delete'
        },
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' },
            type: 'Save'
        },
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' },
            type: 'Cancel'
        }
    ];
    const editOptions = {
        allowAdding: true,
        allowDeleting: true,
        allowEditing: true,
        mode: 'Row'
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' editSettings={editOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
          <ColumnDirective headerText='Manage Records' width='130' commands={commands}/>
        </ColumnsDirective>
        <Inject services={[Edit, CommandColumn]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { CommandModel } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit, EditSettingsModel } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const commands: CommandModel[] = [
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' },
            type: 'Edit',
        },
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-delete e-icons' },
            type: 'Delete'
        },
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-update e-icons' },
            type: 'Save'
        },
        {
            buttonOption: { cssClass: 'e-flat', iconCss: 'e-cancel-icon e-icons' },
            type: 'Cancel'
        }
    ];
    const editOptions: EditSettingsModel = {
        allowAdding: true,
        allowDeleting: true,
        allowEditing: true,
        mode: 'Row'
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270'
      editSettings={editOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
          <ColumnDirective headerText='Manage Records' width='130' commands= {commands}/>
        </ColumnsDirective>
        <Inject services={[Edit,CommandColumn]}/>
    </TreeGridComponent>
};
export default App;

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.

app.jsx

import { closest } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
    const editOptions = { allowEditing: true, allowDeleting: true };
    const commands = [
        {
            buttonOption: {
                content: 'Details', cssClass: 'e-flat'
            }
        }
    ];
    let treegrid;
    const onClick = (args) => {
        if (treegrid) {
            const rowObj = treegrid.getRowObjectFromUID(closest(args.target, '.e-row')
                .getAttribute('data-uid'));
            const rowData = rowObj.data;
            alert(JSON.stringify(rowData));
        }
    };
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' editSettings={editOptions} ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
            <ColumnDirective headerText='Commands' width='120' commands={commands}/>
        </ColumnsDirective>
        <Inject services={[Edit, CommandColumn]}/>
    </TreeGridComponent>;
}
;
export default App;

app.tsx

import { closest } from '@syncfusion/ej2-base';
import { Column, CommandModel, Row } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { CommandColumn, Edit, EditSettingsModel, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';

function App() {
    const editOptions: EditSettingsModel = { allowEditing: true, allowDeleting: true };
    const commands: CommandModel[] = [
      {
        buttonOption: {
          content: 'Details', cssClass: 'e-flat'
        }
      }
    ];
    let treegrid: TreeGridComponent | null;
  
    const onClick = (args: Event): void => {
      if (treegrid) {
        const rowObj: Row<Column> =
          treegrid.getRowObjectFromUID(closest(args.target as Element, '.e-row')
          .getAttribute('data-uid') as string);
        const rowData: object = rowObj.data as object;
        alert(JSON.stringify(rowData));
      }
    }

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270'
        editSettings={editOptions} ref={g => treegrid = g}>
        <ColumnsDirective>
            <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
            <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
            <ColumnDirective headerText='Commands' width='120' commands= {commands}/>
        </ColumnsDirective>
        <Inject services={[Edit,CommandColumn]}/>
    </TreeGridComponent>
};
export default App;