Sorting

17 Dec 20183 minutes to read

We can change ListBox items rendering order either as ascending or descending, by using “sortOrder” property. By default sortOrder will be “None”. Please use code as like in below,

HTML

<div class="frame">
        <div class="ctrllabel">Select a car</div>
      <ej-listbox id="defaultlistbox" style="display:block;" width="100%" [dataSource]="data" width="100%" [fields]="fieldList" [sortOrder]="sorting"></ej-listbox>
    </div>

Please use the below JavaScript code to get sorted items in listbox.

TS

export class DefaultComponent {
    data: Array<{ employeeId: string, text: string, value: string }>;
    fieldList: Object;
    value: string;
    constructor() {
        this.data = [
            { employeeId: 'cr1', text: 'Dodge Avenger', value: 'Dodge Avenger' },
            { employeeId: 'cr2', text: 'Chrysler 200', value: 'Chrysler 200' },
            { employeeId: 'cr3', text: 'Ford Focus', value: 'Ford Focus' },
            { employeeId: 'cr4', text: 'Ford Taurus', value: 'Ford Taurus' },
            { employeeId: 'cr5', text: 'Dazzler', value: 'Dazzler' },
            { employeeId: 'cr6', text: 'Chevy Spark', value: 'Chevy Spark' },
            { employeeId: 'cr7', text: 'Chevy Volt', value: 'Chevy Volt' },
            { employeeId: 'cr8', text: 'Honda Fit', value: 'Honda Fit' },
            { employeeId: 'cr9', text: 'Honda Cross tour', value: 'Honda Cross tour' },
            { employeeId: 'cr10', text: 'Hyundai Elantra', value: 'Hyundai Elantra' },
            { employeeId: 'cr11', text: 'Mazda3', value: 'Mazda3' }
        ];
        this.fieldList = { dataSource: this.data, text: 'text', value: 'value' };
        this.sorting=ej.SortOrder.Descending;
    }
}