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.
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';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['Indent', 'Outdent'];
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' selectedRowIndex='2' height='270' toolbar={this.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>;
}
}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';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['Indent', 'Outdent'];
public render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' selectedRowIndex='2' height='270' toolbar={this.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>
}
}To change hierarchy level of the record programmatically,
indentandoutdentmethods can be used by passing the record as a parameter.