Sorting in Angular Data Grid

3 Sep 202624 minutes to read

The Syncfusion Angular Data Grid provides flexible sorting capabilities that help organize, analyze, and locate information efficiently. Sorting can be applied through column headers or customized to support application-specific ordering requirements.

To enable sorting in the grid, set the allowSorting property to true.

Sorting a particular column is accomplished by clicking on its column header. Each click on the header toggles the sort order between Ascending and Descending.

To use the sorting feature, add the SortService to the providers array.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowSorting]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • Data Grid column sorted in Ascending order. If a click occurs on an already sorted column, the sort direction toggles.
  • Apply and clear sorting by using the sortColumn and clearSorting methods.

Sort order

By default, the sorting order is “ascending → descending → none”.

The first click on a column header sorts the column in ascending order. A second click sorts the column in descending order. A third click clears the sorting.

The allowUnsort property controls whether sorting can be cleared. When set to false, clicking a grid header will only toggle between ascending and descending order, without switching to an unsorted state. The default value is true.

Initial sorting

The Data Grid component provides an option to apply initial sorting by setting the sortSettings.columns property to the desired field and sort direction. This feature is useful for displaying data in a specific order when the grid initially loads.

The following example demonstrates setting sortSettings.columns for “Order ID” and “Ship City” columns with a specified direction.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowSorting]='true' [sortSettings]='sortOptions' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public sortOptions?: object;

    ngOnInit(): void {
        this.data = data;
        this.sortOptions = { columns: [{ field: 'OrderID', direction: 'Ascending' }, { field: 'ShipCity', direction: 'Descending' }] };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The initial sorting defined in sortSettings.columns will override any sorting applied through user interaction.

Multi-column sorting

The Data Grid supports multi-column sorting, allowing records to be ordered using multiple sorting criteria simultaneously. Multi-column sorting makes it possible to establish hierarchical sort priorities, ensuring that records with identical values in one column can be further organized using additional columns.

To enable multi-column sorting, set the allowSorting and the allowMultiSorting properties to true. This enables sorting of multiple columns by holding the CTRL key and clicking the column headers. This feature is useful for datasets that require more than a single sorting dimension.

To clear multi-column sorting for a particular column, press Shift while clicking the column header.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowSorting]='true' [allowMultiSorting]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Disable sorting for a specific column

The Data Grid component allows disabling sorting for a column. This is useful when certain columns should not be included in the sorting process.

This is achieved by setting the allowSorting property of the particular column to false. The following example demonstrates disabling sorting for “Customer ID” column.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowSorting]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100 [allowSorting]=false></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Custom sorting

The Data Grid supports custom sorting through the sortComparer property, providing complete control over how values are ordered within a column.

Custom sorting can be used when the required sort order differs from standard alphabetical or numerical sorting. This is useful for scenarios that require custom rankings, status-based ordering, priority sequencing, locale-aware comparisons, display-value sorting, or specialized handling of null values.

The following example demonstrates defining a custom sortComparer function for the “Customer ID” column.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowSorting]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' [sortComparer]='sortComparer' headerText='Customer ID' width=100></e-column>
                    <e-column field='Freight' headerText='Freight' width=80 format='C2'></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    // The custom function
    public sortComparer = (reference: string, comparer: string) => {
        if (reference < comparer) {
            return -1;
        }
        if (reference > comparer) {
            return 1;
        }
        return 0;
    }

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The “customSortComparer” function takes two parameters: a and b, which are the values being compared. The function returns “-1”, “0”, or “1”, depending on the comparison result.

Display null values always at bottom

By default, “null” values in a Angular Data Grid are displayed at the top when sorting in descending order and at the bottom when sorting in ascending order. However, “null” values can be configured to always display at the bottom of the grid regardless of sort direction. This is achieved by utilizing the column.sortComparer method. This feature is particularly useful when working with data sets where “null” values need to be clearly separated from actual data entries.

The example below demonstrates displaying “null” values at the bottom of the grid while sorting the “Order Date” column in both ascending and descending order.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortEventArgs, SortService } from '@syncfusion/ej2-angular-grids';

let action: string;

@Component({
    imports: [ GridModule],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' allowSorting='true' (actionBegin)='actionBegin($event)' height='300px'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' width='100'></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column>
                        <e-column field='OrderDate' headerText='Order Date' format='yMd'
                        [sortComparer]='sortComparer'  width='120'></e-column>
                        <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
                    </e-columns>
                </ejs-grid>`
})

export class AppComponent implements OnInit {

    public data?: object[];
    ngOnInit(): void {
        this.data = data;
    }
    actionBegin(args: SortEventArgs) {
        if (args.requestType === 'sorting') {
            action = (args as any).direction;
        }
    }
    sortComparer(reference: any, comparer: any) {
        const sortAsc = action === 'Ascending' ? true : false;
        if (sortAsc && reference === null) {
            return 1;
        } else if (sortAsc && comparer === null) {
            return -1;
        } else if (!sortAsc && reference === null) {
            return -1;
        } else if (!sortAsc && comparer === null) {
            return 1;
        } else {
            return reference - comparer;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Foreign key sorting

Foreign-key sorting enables sorting based on displayed values rather than the underlying identifier values stored in the data source.

To sort a foreign key column based on its displayed text, the foreign key column can be enabled by using column.dataSource, column.foreignKeyField and column.foreignKeyValue properties.

Sort foreign key column based on text for local data

When working with local data in the grid, sorting is performed based on the foreignKeyValue defined in the column. This field should be specified in the column definition with the corresponding foreign key value for each row. The grid then sorts the foreign key column according to the text representation of that value.

The following example demonstrates sorting with a foreign key column enabled, where the “Customer ID” column acts as a foreign column displaying the “Contact Name” column from foreign data.

import { customerData, data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { ForeignKeyService, GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule, ButtonModule ],
    providers: [SortService,ForeignKeyService],
    standalone: true,
    selector: 'app-root',
    template: `
    <ejs-grid [dataSource]='data' [allowSorting]='true' height='315px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' foreignKeyValue='ContactName' foreignKeyField='CustomerID' [dataSource]='customerData' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid> `
})
export class AppComponent implements OnInit {

    public data?: object[];
    public customerData: object[] = customerData;

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Make sure to inject the ForeignKeyService in the provider section to ensure its availability throughout the application.

Sort foreign key column based on text for remote data

In the case of remote data in the grid, the sorting operation will be performed based on the foreignKeyField property of the column. The foreignKeyField property should be defined in the column definition with the corresponding foreign key field name for each row. The grid will send a request to the server-side with the foreignKeyField name, and the server-side should handle the sorting operation and return the sorted data to the grid.

import { Component, OnInit } from '@angular/core';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { ForeignKeyService } from '@syncfusion/ej2-angular-grids';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid [dataSource]='data' [height]='315'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='EmployeeID' headerText='Employee Name' width=120 foreignKeyValue='FirstName'
                         [dataSource]='employeeData' foreignKeyField='EmployeeID'></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Right' width=80></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=130  ></e-column>
                    </e-columns>
                </ejs-grid>`,
    providers: [ForeignKeyService]
})
export class AppComponent implements OnInit {

    public data: DataManager;
    public employeeData: DataManager;

    ngOnInit(): void {
        this.data = new DataManager({
            url: '/OData/Items',
            adaptor: new ODataV4Adaptor()
        });
        this.employeeData = new DataManager({
            url: '/OData/Brands',
            adaptor: new ODataV4Adaptor()
        });
    }
}

The following code example describes the handling of sorting operation at the server side.

public class ItemsController : ODataController
{
    [EnableQuery]
    public IQueryable<Item> Get()
    {
        List<Item> GridData = JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
        List<Brand> empData = JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
        var queryString = HttpContext.Current.Request.QueryString;
        var allUrlKeyValues = ControllerContext.Request.GetQueryNameValuePairs();
        string key = allUrlKeyValues.LastOrDefault(x => x.Key == "$orderby").Value;
        if (key != null)
        {
            if (key == "EmployeeID") {
                GridData = SortFor(key); //Only for foreignKey Column ascending
            }
            else if(key == "EmployeeID desc") {
                GridData = SortFor(key); //Only for foreignKey Column descending
            }
        }
        var count = GridData.Count();
        var data = GridData.AsQueryable();
        return data;
    }

    public List<Item> SortFor(String Sorted)
    {
        List<Item> GridData = JsonConvert.DeserializeObject<Item[]>(Properties.Resources.ItemsJson).AsQueryable().ToList();
        List<Brand> empData = JsonConvert.DeserializeObject<Brand[]>(Properties.Resources.BrandsJson).AsQueryable().ToList();
        if (Sorted == "EmployeeID") //check whether ascending or descending
            empData = empData.OrderBy(e => e.FirstName).ToList();
        else if(Sorted == "EmployeeID desc")
            empData = empData.OrderByDescending(e => e.FirstName).ToList();
        List<Item> or = new List<Item>();
        for (int i = 0; i < empData.Count(); i++) {
            //Select the Field matching records
            IEnumerable<Item> list = GridData.Where(pred => pred.EmployeeID == empData[i].EmployeeID).ToList();
            or.AddRange(list);
        }
        return or;
    }
}

Culture-based sorting

Culture-based sorting applies locale-specific comparison rules, ensuring accurate sorting behavior for multilingual and internationalized applications.

Culture-specific sorting is achieved by utilizing the locale property. By setting the locale property to the desired culture code, sorting is enabled based on that specific culture.

In the following example, sorting is performed based on the “ar” locale using the column.sortComparer property.

import { cagregorian } from './ca-gregorian.json';
import { currencies } from './currencies.json';
import { data } from './datasource';
import { numberingSystems } from './numberingSystems.json';
import { numbers } from './numbers.json';
import { timeZoneNames } from './timeZoneNames.json';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortService } from '@syncfusion/ej2-angular-grids';
import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';

@Component({
    imports: [GridModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' locale='ar' [allowSorting]="true" height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90 [sortComparer]="sortComparer"></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100 [sortComparer]="sortComparer"></e-column>
                    <e-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width=80 [sortComparer]="sortComparer"></e-column>
                    <e-column field='OrderDate' headerText='OrderDate' [format]='formatOptions' textAlign='Right' width=120 [sortComparer]="sortComparer"></e-column>
                </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public formatOptions?: object;

    ngOnInit(): void {
        setCulture('ar');
        setCurrencyCode('QAR');
        loadCldr(
            cagregorian,
            currencies,
            numbers,
            timeZoneNames,
            numberingSystems
        );
        this.formatOptions = { type: 'date', format: 'yyyy/MMM/dd' };
        this.data = data;
    }

    public sortComparer = (reference: number | Date | string, comparer: number | Date | string, sortOrder: 'Ascending' | 'Descending') => {
        const referenceDate = new Date(reference);
        const comparerDate = new Date(comparer);
        if (typeof reference === 'number' && typeof comparer === 'number') {
            // Numeric column sorting
            return sortOrder === 'Ascending' ? comparer - reference : reference - comparer;
        } else if (!isNaN(referenceDate.getTime()) && !isNaN(comparerDate.getTime())) {
            // Date column sorting
            return sortOrder === 'Ascending' ? comparerDate.getTime() - referenceDate.getTime() : referenceDate.getTime() - comparerDate.getTime();
        }
        else {
            // Default sorting for other types
            const intlCollator = new Intl.Collator(undefined, { sensitivity: 'variant', usage: 'sort' });
            const comparisonResult = intlCollator.compare(String(reference), String(comparer));
            return sortOrder === 'Ascending' ? -comparisonResult : comparisonResult;
        }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Touch interaction

On touch devices, tapping a grid header sorts that column Sorting.
For multi‑column sorting, tap the sorting indicator Multi Sorting and then tap the additional grid headers to include them in the sort order.

The allowMultiSorting and allowSorting must be true then only the popup will be shown.

The following screenshot represents a grid touch sorting in the device.

Touch Interaction

Programmatic sorting

The Data Grid component in Syncfusion’s Angular suite allows customization of column sorting and provides flexibility in sorting based on external interactions. Sort columns, remove a sort column, and clear sorting using an external button click.

Add sort columns

External column sorting is accomplished using the sortColumn method with parameters columnName, direction, and isMultiSort. This method enables programmatic sorting of a specific column based on specified requirements.

The following example demonstrates adding sort columns to a grid. The DropDownList component selects the column and sort direction. When an external button is clicked, the sortColumn method is called with the specified columnName, direction, and isMultiSort parameters.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, GridModule, SortDirection, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule, ButtonModule, DropDownListAllModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
    <label style="padding: 30px 20px 0 0"> Column name :</label>
    <ejs-dropdownlist
      #dropdownColumn
      style="padding: 26px 0 0 0"
      index="0"
      width="120"
      [dataSource]="columns"
      [fields]="field"
    ></ejs-dropdownlist>
    </div>
    <div style="display: flex">
    <label style="padding: 30px 17px 0 0"> Sorting direction :</label>
    <ejs-dropdownlist
      #dropdownDirection
      style="padding: 26px 0 0 0"
      index="0"
      width="120"
      [dataSource]="direction"
    ></ejs-dropdownlist>
    </div>
    <button
    style="margin-top: 10px "
    ejs-button
    id="button"
    cssClass="e-outline"
    (click)="addSortColumn()"
    >
    Add sort column
    </button>
    <ejs-grid style="padding: 10px 10px" #grid [dataSource]='data' [allowSorting]='true' [sortSettings]="sortOptions" height='150px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>            
            <e-column field="Freight" headerText="Freight" width="80" format="C2" textAlign="Right" ></e-column>
        </e-columns>
    </ejs-grid> 
`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public sortOptions?: any;
    @ViewChild('grid')
    public grid?: GridComponent;
    @ViewChild('dropdownColumn') 
    public dropDownColumn?: DropDownListComponent;
    @ViewChild('dropdownDirection')
    public dropDownDirection?: DropDownListComponent;
    public columns: object[] = [
        { text: 'Order ID', value: 'OrderID' },
        { text: 'Customer ID', value: 'CustomerID' },
        { text: 'Freight', value: 'Freight' },
    ];
    public direction: object[] = [
        { text: 'Ascending', value: 'Ascending' },
        { text: 'Descending', value: 'Descending' },
    ];
    public field: object = { text: 'text', value: 'value' };

    ngOnInit(): void {
        this.sortOptions = {
            columns: [
                { field: 'ShipName', direction: 'Ascending' },
            ],
        };
        this.data = data;
    }

    addSortColumn() {
        (this.grid as GridComponent).sortColumn(
          (this.dropDownColumn as DropDownListComponent).value as SortDirection,
          (this.dropDownDirection as DropDownListComponent).value as SortDirection,
          true
        );
      }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Remove sort columns

External removal of sort columns is accomplished using the removeSortColumn method provided by the Data Grid component. This method removes the sorting applied to a specific column.

The following example demonstrates removing sort columns. The DropDownList component selects the column. When an external button is clicked, the removeSortColumn method removes the selected sort column.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [
        GridModule,
        ButtonModule,
        DropDownListAllModule
        ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
    <label style="padding: 30px 20px 0 0"> Column name :</label>
    <ejs-dropdownlist
      #dropdown
      style="padding: 26px 0 0 0"
      index="0"
      width="120"
      [dataSource]="columns"
      [fields]="field"
    ></ejs-dropdownlist>
    </div>
    <button
    style="margin-top: 10px "
    ejs-button
    id="button"
    cssClass="e-outline"
    (click)="removeSortColumn()"
    >
    Remove sort column
    </button>
    <ejs-grid style="padding: 10px 10px" #grid [dataSource]='data' [allowSorting]='true' [sortSettings]="sortOptions" height='200px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid> 
`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public sortOptions?: any;
    @ViewChild('grid')
    public grid?: GridComponent;
    @ViewChild('dropdown') 
    public dropDown?: DropDownListComponent;

    public columns: object[] = [
        { text: 'Customer ID', value: 'CustomerID' },        
        { text: 'Order ID', value: 'OrderID' },
        { text: 'Ship Name', value: 'ShipName' },
        { text: 'Ship City', value: 'ShipCity' },
      ];
      public field: object = { text: 'text', value: 'value' };

    ngOnInit(): void {
        this.sortOptions = {
            columns: [
                { field: 'CustomerID', direction: 'Ascending' },
                { field: 'ShipName', direction: 'Descending' },
            ],
        };
        this.data = data;
    }

    removeSortColumn() {
        (this.grid as GridComponent).removeSortColumn((this.dropDown as DropDownListComponent).value as string);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clear sorting

Sorting is cleared on an external button click using the clearSorting method provided by the grid component. This method clears the sorting applied to all columns in the grid.

The following example demonstrates clearing sorting using the clearSorting method in an external button click.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, ButtonModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div>
        <button ejs-button id="button" cssClass="e-outline" (click)="onExternalSort()"> Clear Sorting </button>
        <ejs-grid style="padding: 10px 10px" #grid [dataSource]='data' [allowSorting]='true' [sortSettings]="sortOptions" height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
            </e-columns>
        </ejs-grid> 
    </div>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public sortOptions?: any;

    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.sortOptions = {
            columns: [
                { field: 'CustomerID', direction: 'Ascending' },
                { field: 'ShipName', direction: 'Descending' },
            ],
        }
    }

    onExternalSort() {
        (this.grid as GridComponent).clearSorting();
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Sorting events

The Data Grid component provides two events related to sorting, such as actionBegin and actionComplete. These events can be used to perform custom actions before and after the sorting process is completed.

  1. actionBegin: This event is triggered before the sorting action begins. It provides a way to perform any necessary operations before the sorting action takes place. This event provides a parameter that contains the current grid state, including the current sorting column, direction, and data.

  2. actionComplete: This event is triggered after the sorting action is completed. It provides a way to perform any necessary operations after the sorting action has taken place. This event provides a parameter that contains the current grid state, including the sorted data and column information.

This example demonstrates that the actionBegin event is used to cancel sorting for the “Order ID” column, while the actionComplete event displays a message after the sorting action finishes.

import { GridModule, SortService, SortEventArgs } from '@syncfusion/ej2-angular-grids';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';

@Component({
    imports: [GridModule],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="margin-left:100px;"><p style="color:red;" id="message">{{ message }}</p></div>
    <ejs-grid [dataSource]='data' (actionComplete)='actionComplete($event)' (actionBegin)='actionBegin($event)' [allowSorting]='true' height='315px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public message?: string;

    ngOnInit(): void {
        this.data = data;
    }

    actionBegin(args: SortEventArgs) {
        if (args.requestType === 'sorting' && args.columnName === 'OrderID') {
            this.message = args.requestType + ' action cancelled for ' + args.columnName + ' column';
            args.cancel = true;
        }
    }
    actionComplete({ requestType, columnName }: SortEventArgs) {
        this.message = requestType + ' action completed for ' + columnName + ' column';
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

args.requestType refers to the current action being performed. For example in sorting, the args.requestType value is sorting.

Customizing the sort icon

Sort icon customization in the grid is accomplished by overriding the default grid classes .e-icon-ascending and .e-icon-descending with custom content using CSS. The desired icons or symbols are specified using the content property as shown below:

.e-grid .e-icon-ascending::before {
  content: '\e306';
}
	
.e-grid .e-icon-descending::before {
  content: '\e304';
}

The following sample demonstrates a grid rendered with a customized sort icon.

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, SortService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule ],
    providers: [SortService],
    standalone: true,
    selector: 'app-root',
    template: `
    <ejs-grid [dataSource]='data' [allowSorting]='true' [sortSettings]="initialSort" height='315px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid> `,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public initialSort?: object;

    ngOnInit(): void {
        this.data = data;
        this.initialSort = {
            columns: [
                { field: 'ShipCity', direction: 'Ascending' },
                { field: 'CustomerID', direction: 'Descending' },
            ],
        };
    }

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also