# Sorting
## Content
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.
```auto
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:
```auto
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.
```auto
function init() {
new FlexGrid('#theGrid', {
itemsSource: getData(200),
allowSorting: AllowSorting.MultiColumn
});
}
```