Indent and outdent in Angular TreeGrid component

19 Sep 20249 minutes to read

The Syncfusion Angular TreeGrid component provides built-in support for indenting and outdenting rows, allowing you to easily adjust the hierarchy level of rows within the tree grid.

Indent - The indent feature moves the selected row to a deeper hierarchical level within the tree grid, indenting it by one level of hierarchy. The indent action moves the selected row as the last child of its previous row.

Outdent - The outdent feature moves the selected record up by one level of hierarchy within the tree grid. The outdent action moves the selected row as a sibling to its parent row.

To utilize the indent and outdent functionality, inject the RowDDService in the provider section of the AppModule. This service is responsible for handling the indent and outdent operations in the TreeGrid component.

The tree grid toolbar includes built-in items for executing indent and outdent actions. These items can be defined using the toolbar property.

The following demo illustrates how to enable indent and outdent functionalities in the tree grid:

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { RowDDService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import { Component, OnInit, ViewEncapsulation, } from '@angular/core';
import { sampleData } from './datasource';

@Component({
    imports: [TreeGridModule,],
    providers: [RowDDService, ToolbarService],
    standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data'  [treeColumnIndex]='1' height='270' childMapping='subtasks'  [selectedRowIndex]='2' [toolbar]='toolbarOptions' >
                <e-columns>
                    <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                    <e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                 </e-columns>
            </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
    public data?: Object[];
    public toolbarOptions?: string[];

    ngOnInit(): void {
        this.data = sampleData;
        this.toolbarOptions = ['Indent', 'Outdent'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Indent/Outdent a row programmatically

You can programmatically change the hierarchy level of a record using the indent and outdent methods provided by the TreeGrid component.

Before performing the indent or outdent action, you need to select the row. This can be done using the selectRow method with the desired index of the row.

The following demo illustrates how to programmatically indent or outdent a row using a button click. Upon clicking the button, the row is selected using the selectRow method with the desired index, followed by either the indent or outdent method to perform the action.

import { NgModule, ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { RowDDService } from '@syncfusion/ej2-angular-treegrid'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
    imports: [TreeGridModule, ButtonModule],
    providers: [RowDDService],
    standalone: true,
    selector: 'app-container',
    template: `
    <button ejs-button (click)="Indenting()">Indent</button>
    <button ejs-button (click)="Outdenting()">Outdent</button>
    <ejs-treegrid #treegrid [dataSource]='data' [treeColumnIndex]='1' height='270' childMapping='subtasks'  >
        <e-columns>
            <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
            <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
            <e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
            <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
    @ViewChild('treegrid')
    public treegrid?: TreeGridComponent;
    public data?: Object[];

    ngOnInit(): void {
        this.data = sampleData;
    }

    public Indenting(): void {
        //Here, the row is selected before indenting by passing the index in the selectRow method.
        this.treegrid?.selectRow(2);
        //After selecting the row, the selected row is indented using the indent method.
        this.treegrid?.indent();
    }

    public Outdenting(): void {
        //Here, the row is selected before outdenting by passing the index in the selectRow method.
        this.treegrid?.selectRow(2);
        //After selecting the row, the selected row is outdented using the outdent method.
        this.treegrid?.outdent();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Indent and outdent events

In the Tree Grid, you can retrieve the details of indenting and outdenting actions using the actionComplete event of the tree grid. Within the actionComplete event, you can access the indent/outdent details according to the action using the args.requestType property with values indented or outdented.

The following demo demonstrates how to retrieve the details of indenting and outdenting actions using the actionComplete event with the args.requestType property:

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { sampleData } from './datasource';

@Component({
  selector: 'app-container',
  template: `
    <p id="message" style="color:red">{{message}}</p>
  <ejs-treegrid [dataSource]='data'  [treeColumnIndex]='1' height='270' childMapping='subtasks'  [toolbar]='toolbarOptions' (actionComplete)="actioncomplete($event)" >
                <e-columns>
                    <e-column field='taskID' headerText='Task ID' [isPrimaryKey]='true' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                    <e-column field='priority' headerText='Priority' textAlign='Right' width=90></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
                 </e-columns>
            </ejs-treegrid>`,
})
export class AppComponent implements OnInit {
  public data?: Object[];
  public toolbarOptions?: string[];
  public message: string = '';

  ngOnInit(): void {
    this.data = sampleData;
    this.toolbarOptions = ['Indent', 'Outdent'];
  }
  actioncomplete(args: any) {
    if (args.requestType == 'outdented') {
      this.message = 'Task ID ' + args.data[0].taskID + ' has been outdented';
    } else if (args.requestType == 'indented') {
      this.message = 'Task ID ' + args.data[0].taskID + ' has been indented';
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Limitation

  • The indent/outdent feature does not support multiple row selection.