Column reorder in Angular Treegrid component
17 Nov 202217 minutes to read
Reordering can be done by drag and drop of a particular column header from one index to another index within the treegrid. To enable reordering, set the allowReordering
to true.
To use reordering, inject the Reorder
module in the treegrid.
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ReorderService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='315' [allowReordering]='true' [treeColumnIndex]='1' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' 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-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [ReorderService]
})
export class AppComponent implements OnInit {
public data: 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 { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can disable reordering a particular column by setting the
columns.allowReordering
to false.
Reorder single column
The tree grid have an option to reorder Columns either by interaction or by using the reorderColumns method. In the following sample, the duration column is reordered to the last column position by using the method.
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { TreeGridComponent, ReorderService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<button ejs-button (click)="btnClick()">Reorder Duration to Last</button>
<ejs-treegrid #treegrid [dataSource]='data' height='285' [allowReordering]='true' [treeColumnIndex]='1' childMapping='subtasks'>
<e-columns>
<e-column field='taskID' headerText='Task ID' 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-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [ReorderService]
})
export class AppComponent implements OnInit {
public data: Object[];
@ViewChild('treegrid')
public treeGridObj: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
}
btnClick(e: any): any{
this.treeGridObj.reorderColumns('duration','progress');
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Reorder multiple columns
Multiple columns can be reordered at a time by using the reorderColumns
method.
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent,ReorderService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<button ejs-button (click)="btnClick()">Reorder Task ID and Duration to Last</button>
<ejs-treegrid #treegrid [dataSource]='data' height='285' [allowReordering]='true' [treeColumnIndex]='1' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' 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-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [ReorderService]
})
export class AppComponent implements OnInit {
public data: Object[];
@ViewChild('treegrid')
public treeGridObj: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
}
btnClick(e: any): any{
this.treeGridObj.reorderColumns(['taskID','duration'],'progress');
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Reorder events
During the reorder action, the tree grid component triggers the following three events:
- The columnDragStart event triggers when the column header element drag (move) starts.
- The columnDrag event triggers when the column header element is dragged (moved) continuously.
- The columnDrop event triggers when a column header element is dropped on the target column.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='285' [allowReordering]='true' [treeColumnIndex] ='1' childMapping='subtasks' (columnDragStart)="columnDragStart()" (columnDrag)="columnDrag()" (columnDrop)="columnDrop()">
<e-columns>
<e-column field='taskID' headerText='Task ID' 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-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: object[];
@ViewChild('treegrid') public treegridObj: TreeGridComponent;
ngOnInit(): void {
this.data = sampleData;
}
columnDrop() {
alert('columnDrop event is Triggered');
}
columnDragStart() {
alert('columnDragStart event is Triggered');
}
columnDrag() {
alert('columnDrag event is Triggered');
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule, ReorderService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ReorderService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Lock columns
Lock columns by using the column.lockColumn property. The locked columns will be moved to the first position. Also, you can’t reorder its position.
In the below example, duration column is locked and its reordering functionality is disabled.
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { sampleData } from './datasource';
import { ReorderService } from '@syncfusion/ej2-angular-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid #treegrid [dataSource]='data' height='285' [allowReordering]='true' [allowSelection]='false' [treeColumnIndex]='1' childMapping='subtasks' >
<e-columns>
<e-column field='taskID' headerText='Task ID' 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=120></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=120 [lockColumn]= 'true' [customAttributes]='customAttributes'></e-column>
<e-column field='progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-treegrid>`,
providers: [ReorderService],
encapsulation: ViewEncapsulation.None,
styleUrls: ['app/custom-column.style.css']
})
export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void {
this.data = sampleData;
this.customAttributes = {class: 'customcss'};
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);