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 use Sorting, inject Sort module in TreeGrid.
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component<{}, {}>{
public render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting='true' height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' width='180'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component {
render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting='true' height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' width='180'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- 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
sortByColumn
andclearSorting
methods.- To disable sorting for a particular column, set the
columns.allowSorting
to false.
To sort at initial rendering, set the field
and direction
in the sortSettings.columns
.
import { ColumnDirective, ColumnsDirective, Inject, Sort, SortSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component<{}, {}>{
public sortingOptions: SortSettingsModel = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
public render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting='true' height='315' sortSettings={this.sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.sortingOptions = {
columns: [
{ field: 'Category', direction: 'Ascending' },
{ field: 'orderName', direction: 'Ascending' }
]
};
}
render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting='true' height='315' sortSettings={this.sortingOptions}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='150' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
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 { ActionEventArgs } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component<{}, {}>{
public actionHandler (args: ActionEventArgs) {
/** custom Action */
alert(args.requestType + ' ' + args.type);
}
public render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks'
allowSorting='true' height='315' actionBegin={this.actionHandler}
actionComplete={this.actionHandler}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component {
actionHandler(args) {
/** custom Action */
alert(args.requestType + ' ' + args.type);
}
render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting='true' height='315' actionBegin={this.actionHandler} actionComplete={this.actionHandler}>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The
args.requestType
is the current action name. For example, in sorting theargs.requestType
value is sorting.
You can customize the default sort action for a column by defining the column.sortComparer
property. The sort comparer function has the same functionality like Array.sort
sort comparer.
In the following example, custom sort comparer function was defined in the Category column.
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component<{}, {}>{
/** Custom comparer function */
public sortComparer(reference: string, comparer: string) {
if (reference < comparer) {
return -1;
}
if (reference > comparer) {
return 1;
}
return 0;
};
public render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting='true' height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' sortComparer={this.sortComparer} width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>
}
}
import { ColumnDirective, ColumnsDirective, Inject, Sort, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sortData } from './datasource';
export default class App extends React.Component {
/** Custom comparer function */
sortComparer(reference, comparer) {
if (reference < comparer) {
return -1;
}
if (reference > comparer) {
return 1;
}
return 0;
}
;
render() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks' allowSorting='true' height='315'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='140'/>
<ColumnDirective field='orderName' headerText='Order Name' sortComparer={this.sortComparer} width='200'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='120' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='units' headerText='Units' width='90' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Sort]}/>
</TreeGridComponent>;
}
}
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
The sort comparer function will work only for the local data.
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.