Sorting in Angular Treegrid component
22 Mar 202321 minutes to read
Sorting enables you to sort data in the Ascending
or Descending
order.
To sort a column, click the column header.
To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header.
To enable sorting in the TreeGrid, set the allowSorting
to true. Sorting options can be configured through the sortSettings
.
To sort, inject the Sort
module in the treegrid.
import { Component, OnInit } from '@angular/core';
import { sortData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' height='315' [treeColumnIndex]='1' [allowSorting]='true' childMapping='subtasks' >
<e-columns>
<e-column field='Category' headerText='Category' textAlign='Right' width=140></e-column>
<e-column field='orderName' headerText='Order Name' textAlign='Left' width=200></e-column>
<e-column field='orderDate' headerText='Order Date' textAlign='Right' format='yMd' width=150></e-column>
<e-column field='units' headerText='Units' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void {
this.data = sortData;
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PageService, SortService, FilterService,ToolbarService,TreeGridModule } 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: [PageService,
SortService,
FilterService,
ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
- TreeGrid columns are sorted in the
Ascending
order. If you click the already sorted column, the sort direction toggles.- You can apply and clear sorting by invoking
sortColumn
and
clearSorting
methods.- To disable sorting for a particular column, set the
columns.allowSorting
to false.
Initial sort
To sort at initial rendering, set the field
and direction
in the sortSettings.columns
.
import { Component, OnInit } from '@angular/core';
import { sortData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='315' [allowSorting]='true' childMapping='subtasks' [sortSettings]='initialSort'>
<e-columns>
<e-column field='Category' headerText='Category' textAlign='Right' width=140></e-column>
<e-column field='orderName' headerText='Order Name' textAlign='Left' width=200></e-column>
<e-column field='orderDate' headerText='Order Date' textAlign='Right' format='yMd' width=150></e-column>
<e-column field='units' headerText='Units' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[];
public initialSort: Object;
ngOnInit(): void {
this.data = sortData;
this.initialSort = { columns: [{ field: 'Category', direction: 'Ascending' }, { field: 'orderName', direction: 'Ascending' }] };
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PageService, SortService, FilterService,ToolbarService,TreeGridModule } 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: [PageService,
SortService,
FilterService,
ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Multi-column sorting
Sort more than one column in a tree grid. To sort multiple columns, press and hold the CTRL key and click the column header. The sorting order will be displayed in the header while performing multi-column sorting.
To clear sorting for a particular column, press the “Shift + mouse left click.”
The allowSorting must be true while enabling multi-column sort.
Set the allowMultiSorting property as false to disable multi-column sorting.
import { Component, OnInit } from '@angular/core';
import { sortData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='315' [allowSorting]='true' childMapping='subtasks' >
<e-columns>
<e-column field='Category' headerText='Category' textAlign='Right' width=140></e-column>
<e-column field='orderName' headerText='Order Name' textAlign='Left' width=200></e-column>
<e-column field='orderDate' headerText='Order Date' textAlign='Right' format='yMd' width=150></e-column>
<e-column field='units' headerText='Units' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: object[];
ngOnInit(): void {
this.data = sortData;
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PageService, SortService, FilterService,ToolbarService,TreeGridModule } 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: [PageService,
SortService,
FilterService,
ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
To sort the column, you can use
sortByColumn
method in the tree grid. In this method you need to pass the column name, and the direction of sorting as parameters.
Sort order
By default, the sorting order will be as ascending -> descending -> none.
When you first click a column header, it sorts the column in ascending order. Again click the same column header, it will now sort the column in descending order. A repetitive third click on the same column header will clear the sorting.
Sort Comparer
Customize the default sort action for a column by defining the column.sortComparer property.
The sort comparer function has the same functionality as Array.sort sort comparer.
In the following example, the custom sort comparer function was defined in the orderName column.
import { Component, OnInit } from '@angular/core';
import { sortData } from './datasource';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' [treeColumnIndex]='1' height='315' [allowSorting]='true' childMapping='subtasks' >
<e-columns>
<e-column field='Category' headerText='Category' textAlign='Right' width=140></e-column>
<e-column field='orderName' [sortComparer]='sortComparer' headerText='Order Name' textAlign='Left' width=200></e-column>
<e-column field='orderDate' headerText='Order Date' textAlign='Right' format='yMd' width=150></e-column>
<e-column field='units' headerText='Units' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[] = [];
public sortComparer = (reference: string, comparer: string) => {
if (reference < comparer) {
return -1;
}
if (reference > comparer) {
return 1;
}
return 0;
};
ngOnInit(): void {
this.data = sortData;
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PageService, SortService, FilterService,ToolbarService,TreeGridModule } 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: [PageService,
SortService,
FilterService,
ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Sorting events
During the sort action, the treegrid component triggers two events. The actionBegin
event triggers before the sort action starts, and the actionComplete
event triggers after the sort action is completed. Using these events you can perform the needed actions.
import { Component, OnInit } from '@angular/core';
import { sortData } from './datasource';
import { SortEventArgs } from '@syncfusion/ej2-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' height='315' [treeColumnIndex]='1' [allowSorting]='true' childMapping='subtasks' (actionBegin)='actionHandler($event)' (actionComplete)='actionHandler($event)'>
<e-columns>
<e-column field='Category' headerText='Category' textAlign='Right' width=140></e-column>
<e-column field='orderName' headerText='Order Name' textAlign='Left' width=200></e-column>
<e-column field='orderDate' headerText='Order Date' textAlign='Right' format='yMd' width=150></e-column>
<e-column field='units' headerText='Units' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[];
ngOnInit(): void {
this.data = sortData;
}
actionHandler(args: SortEventArgs) {
alert(args.requestType + ' ' + args.type); //custom Action
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PageService, SortService, FilterService,ToolbarService,TreeGridModule } 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: [PageService,
SortService,
FilterService,
ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The
args.requestType
is the current action name. For example, in sorting theargs.requestType
value is ‘sorting’.
Touch interaction
When you tap the treegrid header on touchscreen devices, the selected column header is sorted. A popup is displayed for multi-column sorting. To sort multiple columns, tap the popup
, and then tap the desired treegrid headers.
The following screenshot shows treegrid touch sorting.
You can refer to our
Angular Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore ourAngular Tree Grid example
to knows how to present and manipulate data.