Indent and outdent in Angular TreeGrid component

4 Sep 20259 minutes to read

The Syncfusion® Angular TreeGrid component provides built-in support for indenting and outdenting rows, allowing easy adjustment of the hierarchy level of rows within the TreeGrid.

Indent - The indent feature moves the selected row to a deeper hierarchical level within the TreeGrid, 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 TreeGrid. 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 TreeGrid 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 TreeGrid:

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

The hierarchy level of a record can be changed programmatically using the indent and outdent methods provided by the TreeGrid component.

Before performing the indent or outdent action, the row needs to be selected. 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 TreeGrid, the details of indenting and outdenting actions can be retrieved using the actionComplete event of the TreeGrid. Within the actionComplete event, the indent/outdent details can be accessed 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.