Sorting in Angular MultiColumn ComboBox component

14 Jun 202413 minutes to read

The MultiColumn ComboBox component provides built-in support for sorting data-bound columns in ascending or descending order by using the allowSorting property. By default, the value is true.

To sort a particular column in the MultiColumn ComboBox, click on the grid column header in the popup. Each click on the header toggles the sorting order of the column between Ascending and Descending.

Setting the sort order

You can use the sortOrder property to set the order of the column. It supports three types of sorting None, Ascending and Descending.

When you click on a column header for the first time, it sorts the column in ascending order. Clicking the same column header again will sort the column in descending order. A repetitive third click on the same column header will clear the sorting.

In the following examples, data sorting is done with Descending order.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' [placeholder]='waterMark' allowSorting='true' sortOrder='sortOrder.Descending'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    // set placeholder to ComboBox input element
    public waterMark: string = 'Select a employee';
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Sort type

You can use the sortType property to set the type of sorting applied to the columns. It supports tow types OneColumn and MultipleColumns. By default the sortType is oneColumn.

To sort multiple columns press and hold the CTRL key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways.

In the following examples, data sorting type is set with MultipleColumns.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'



import { Component, HostListener, ViewChild } from '@angular/core';
import { MultiColumnComboBoxComponent } from '@syncfusion/ej2-angular-multicolumn-combobox';


@Component({
    imports: [ FormsModule, ReactiveFormsModule, MultiColumnComboBoxModule, ButtonModule ],
    standalone: true,
    selector: 'app-root',
    // specifies the template string for the MultiColumn ComboBox component with change event
    template: `<ejs-multicolumncombobox id='multicolumn' #multicolumn [dataSource]='empData' [fields]='fields' [placeholder]='waterMark' allowSorting='true' sortOrder='sortOrder.Descending' sortType='MultipleColumns'>
                  <e-columns>
                    <e-column field='EmpID' header='Employee ID' width='100'></e-column>
                    <e-column field='Name' header='Name' width='90'></e-column>
                    <e-column field='Designation' header='Designation' width='100'></e-column>
                    <e-column field='Country' header='Country' width='90'></e-column>
                  </e-columns>
                </ejs-multicolumncombobox>`
})
export class AppComponent {
    // defined the array of object data
    public empData: Object[] = [ 
        { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
        { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
        { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
        { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
        { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
        { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
        { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
        { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
        { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
        { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
        { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
        { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
        { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
        { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
        { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
        { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
        { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
        { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
        { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
        { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
    ]; 
    // maps the appropriate column to fields property
    public fields: Object = { text: 'Name', value: 'EmpID' };
    // set placeholder to ComboBox input element
    public waterMark: string = 'Select a employee';
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));