HelpBot Assistant

How can I help you?

Sorting in Angular Grid Component

19 Mar 202624 minutes to read

The Grid component provides built-in support for sorting data-bound columns in ascending or descending order. 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, inject 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));

  • 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.
  • To disable sorting for a specific column, set the columns.allowSorting property to false.

Initial sorting

The Grid component provided 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 Grid component supports multi-column sorting, allowing multiple columns to be sorted simultaneously. 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 sorting data based on multiple criteria to analyze it in various ways.

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));

Prevent sorting for particular column

The Grid component provides the ability to prevent sorting for a particular 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));

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.

Custom sorting

The Grid component supports customizing the default sort action for a column by defining the sortComparer property. The sortComparer function works similarly to the Array.sort comparer function, allowing custom sorting logic to be defined for a specific column.

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 Syncfusion® Angular 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));

Touch interaction

When tapping the grid header on touch devices, the selected column header is sorted and displays a popup Sorting for multi-column sorting; tap the popup to sort multiple columns Multi Sorting and then tap the desired grid headers.

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

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

Touch Interaction

Sort foreign key column based on text

To perform sorting based on foreign key column, 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

In the case of local data in the grid, the sorting operation will be performed based on the foreignKeyValue property of the column. The foreignKeyValue property should be defined in the column definition with the corresponding foreign key value for each row. The grid will sort the foreign key column based on the text representation of the foreignKeyValue property.

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'></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;
    }
}

Perform sorting based on its culture

Performing sorting based on culture in the grid can be achieved by utilizing the locale property. By setting the locale property to the desired culture code, sorting is enabled based on that specific culture. This applies locale-specific sorting rules and ensures accurate ordering for different languages and regions.

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));

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));

Sort columns externally

The 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 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 to clear the sorting using clearSorting method in the 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 Grid component provides two events that are triggered during the sorting action such as actionBegin and actionComplete. These events can be used to perform any custom actions before and after the sorting action 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 “OrderID” 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.

See Also