React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Indent and Outdent in React TreeGrid component

22 Nov 2022 / 2 minutes to read

The Indent and Outdent feature will help to change the hierarchy level of rows in tree grid. The indent action moves the selected row as the last child of its previous row, whereas the outdent action moves the selected row as a sibling to its parent row.

To use the indent and outdent feature, inject the RowDD module in the Tree Grid. The tree grid toolbar has the built-in items to execute indent and outdent actions. Define this by using the toolbar property.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, RowDD, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    const toolbarOptions = ['Indent', 'Outdent'];
    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' selectedRowIndex={2} height='270' toolbar={toolbarOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='priority' headerText='Priority' width='90'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Toolbar, RowDD]}/>
    </TreeGridComponent>;
}
;
export default App;
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, RowDD, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
    const toolbarOptions: ToolbarItems[] = ['Indent', 'Outdent'];

    return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' selectedRowIndex={2} height='270' toolbar={toolbarOptions}>
        <ColumnsDirective>
          <ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right' isPrimaryKey={true}/>
          <ColumnDirective field='taskName' headerText='Task Name' width='180'/>
          <ColumnDirective field='priority' headerText='Priority' width='90'/>
          <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[Toolbar, RowDD]}/>
    </TreeGridComponent>
};
export default App;

Indent/Outdent a row programmatically

You can change the hierarchy level of record programmatically using indent and outdent methods.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, RowDD } from '@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
function App() {
    let treegrid;
    const Indenting = () => {
        treegrid.indent(treegrid.current.getCurrentViewRecords()[2]);
    };
    const Outdenting = () => {
        treegrid.outdent(treegrid.current.getCurrentViewRecords()[2]);
    };
    return (<div>
    <ButtonComponent onClick={Indenting}>
        Indent
    </ButtonComponent>
    <ButtonComponent onClick={Outdenting}>
        Outdent
    </ButtonComponent>
    <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' selectedRowIndex={2} height='270' 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='priority' headerText='Priority' width='90'/>
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
        </ColumnsDirective>
        <Inject services={[RowDD]}/>
    </TreeGridComponent>
    </div>);
}
;
export default App;
Copied to clipboard
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Inject, RowDD } from '@syncfusion/ej2-react-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';

function App() {
    let treegrid: TreeGridComponent | null;
    const Indenting = () => {
        treegrid.indent((treegrid.current as any).getCurrentViewRecords()[2]);
    }
    const Outdenting = () => {
        treegrid.outdent((treegrid.current as any).getCurrentViewRecords()[2]);
    }

    return (<div>
    <ButtonComponent onClick={Indenting}>
        Indent
    </ButtonComponent>
    <ButtonComponent onClick={Outdenting}>
        Outdent
    </ButtonComponent>
    <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' selectedRowIndex={2} height='270' 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='priority' headerText='Priority' width='90' />
            <ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
        </ColumnsDirective>
        <Inject services={[RowDD]}/>
    </TreeGridComponent>
    </div>);
};
export default App;
Previous
Next