Row drag and drop in Angular Treegrid component

9 Jan 202312 minutes to read

The TreeGrid rows can be reordered, dropped to another TreeGrid or custom control by enabling the allowRowDragAndDrop to true.

To use row drag and drop, inject the RowDDService module in the TreeGrid.

Drag and drop within Tree Grid

The TreeGrid row drag and drop allows you to drag and drop TreeGrid rows on the same TreeGrid using drag icon. To enable row drag and drop, set the allowRowDragAndDrop to true. It provides the way to drop the row above, below or child to the target row with respective to the target row position.

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

@Component({
    selector: 'app-container',
    template: `
        <ejs-treegrid id='TreeGrid' [dataSource]='data' height='315' [allowRowDragAndDrop]='true' [treeColumnIndex]='1' [rowDropSettings]='rowDrop'
         [selectionSettings]='selectionSettings'
         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='startDate' headerText='Start Date' textAlign='Right' format='yMd' 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 rowDrop: Object;
    public selectionSettings: Object;
    ngOnInit(): void {
        this.data = sampleData;
    }
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [RowDDService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

  • Selection feature must be enabled for row drag and drop.
  • For multiple row selection, the type property must be set to multiple.

Drag and drop to another Tree Grid

To drag and drop between two TreeGrid, enable the allowRowDragAndDrop property and specify the target TreeGrid ID in targetID property of rowDropSettings.

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

@Component({
    selector: 'app-container',
    template: `<div>
    <div style="float:left;width:49%">
        <ejs-treegrid id='TreeGrid' [dataSource]='data' [allowRowDragAndDrop]='true' height='315' [treeColumnIndex]='1' [rowDropSettings]='rowDrop'
         [selectionSettings]='selectionSettings'
         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='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
            </e-columns>
        </ejs-treegrid>
    </div>
    <div style="float:left;width:49%">
        <ejs-treegrid id='destTree' height='315' [allowRowDragAndDrop]='true' [treeColumnIndex]='1' [rowDropSettings]='rowDrops' childMapping='subtasks'
        [selectionSettings]='selectionSettings'
        >
            <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='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
            </e-columns>
        </ejs-treegrid>
    </div>
    </div>
    `
})
export class AppComponent implements OnInit {
    public data: Object[];
    public rowDrop: Object;
    public rowDrops: Object;
    public selectionSettings: Object;
    ngOnInit(): void {
        this.data = sampleData;
        this.selectionSettings = { type: 'Multiple' };
        this.rowDrop = { targetID: 'destTree' };
        this.rowDrops = { targetID: 'TreeGrid' };
    }
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [RowDDService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Drag and drop events

The following events are triggered while drag and drop the treegrid rows.

rowDragStartHelper - Triggers when click the drag icon or treegrid row and this event is used to customize the drag element based on user criteria.

rowDragStart -Triggers when starts to drag the treegrid row.

rowDrag - Triggers while dragging the treegrid row.

rowDrop - Triggers when a drag element is dropped on the target element.

Prevent reordering a row as child to another row

You can prevent the default behavior of dropping rows as children to the target by setting the cancel property to true in rowDrop event argument. You can also change the drop position after cancelling using reorderRows method.

In the below example drop action is cancelled and dropped above to target row.

import { Component, OnInit, ViewChild } from '@angular/core';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { sampleData } from './datasource';

@Component({
    selector: 'app-container',
    template: `
        <ejs-treegrid id='TreeGrid' #treegrid [dataSource]='data' height='315' [allowRowDragAndDrop]='true'
         childMapping='subtasks' (rowDrop)="rowDrop($event)" [treeColumnIndex]='1'>
            <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='startDate' headerText='Start Date' textAlign='Right' format='yMd' 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[];
     @ViewChild('treegrid')
    public treegridObj: TreeGridComponent;
    ngOnInit(): void {
        this.data = sampleData;
    }
    public rowDrop(args: any) {
        if (args.dropPosition == 'middleSegment') {
          args.cancel = true;
          treegridObj.reorderRows([args.fromIndex], args.dropIndex, 'above');
       }
    };
}
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 { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [RowDDService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);