Sorting

The Grid control supports the three-state sorting through the CollectionView class. By default, clicking on any column header sorts the data based on that column. Users can toggle between Ascending, Descending and None sorting states by clicking the column header.

By default data isn the Grid will be sorted only in ascending and descending order. To enable three-state sort, the sortOrder property needs to be set to AscDescNone or DescAscNone.

type=note

Note:

To remove the sorting option from a column, click the column header with Ctrl key. To remove all sorts, click the column header in combination with Shift + Control keys.

A user can control the behavior of the sorting in a Grid control at grid and column levels by using the following enum values of the sortOrder property of the FlexGrid class:

• AscDesc : It allows sorting of data from ascending to descending order first.

• DescAsc: It allows sorting of data from descending to ascending order first.

• AscDescNone: It restricts the sorting of data from ascending to descending order.

• DescAscNone : It restricts the sorting of data from descending to ascending order.

type=note

Note: The precedence is given to the sort order on columns when sortOrder property is set on both grid and column.

Additionally, to customize sorting behavior use the showSort and allowSorting properties of the FlexGrid class. The showSort property determines whether the grid displays sort indicators in the column headers. The allowSorting property allows users to prevent sorting in the entire grid control or specific columns. The default value for both the properties is true. The Grid contains the events ‘sortingColumn’ and ‘sortedColumn’ which get fired when sorting is applied by clicking on the column headers in the Grid or in the Filter dialog.

type=info

Limitation:

In FlexSheet, the sortingColumn and sortedColumn events are not triggered when sorting is performed using the SortManager.

The following example code is used to enable the sorting the behavior in the FlexGrid at grid and column levels. Here the sortOrder: wjGrid.SortOrder.AscDesc ensures that when the user clicks on the column headers (Country, Sales, Expenses), the rows will toggle between ascending and descending order depending on the number of clicks.

var theGrid = new wjGrid.FlexGrid('#theGrid', {
        deferResizing: true,
        sortOrder: wjGrid.SortOrder.AscDesc,
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', width: 60, allowSorting: false },
            { binding: 'country', header: 'Country', sortOrder: wjGrid.SortOrder.AscDescNone },
            { binding: 'sales', header: 'Sales', sortOrder: 'DescAsc' },
            { binding: 'expenses', header: 'Expenses' }
        ],
        itemsSource: data
    }); 

On Demand Sorting

The Grid control uses the CollectionView class to manage data operations like sorting, filtering, grouping, paging, and change tracking. By default, the CollectionView automatically refreshes and re-sorts the data after an edit. However, users can modify this behavior by setting the refreshOnEdit property of the FlexGrid class to false.

When refreshOnEdit is set to false, the CollectionView will only re-sort the data when triggered by specific actions, such as clicking a column header. This gives users greater control over sorting, improving performance and user experience, especially with large datasets or frequent updates.

The following example code displays how to control the sorting behavior in a Grid control during editing:

function init() {
    // create the grid with on-demand sorting
    var theGrid = new FlexGrid('#theGrid', {
        alternatingRowStep: 0,
        itemsSource: new CollectionView(getData(), {
        refreshOnEdit: false // on-demand sorting and filtering
        })
    });

Multicolumn Sorting

To enable multi-column sorting, set the allowSorting property to AllowSorting.MultiColumn. Setting this property allows users to sort multiple columns simultaneously. When sort on multiple columns, the grid displays the sort index in the column header next to the sort direction indicator.

type=note

Note:

The default value for allowSorting property is AllowSorting.SingleColumn.

Users can customize the appearance of the sort index by styling the wj-sort-index class. The following example code shows how to enable multicolumn sorting in a Grid control.

function init() {
    new FlexGrid('#theGrid', {
        itemsSource: getData(200),
        allowSorting: AllowSorting.MultiColumn
    });
}