# Row Sorting
## Live example
{% hint style="success" %}
[Row Sorting](https://demos.dikesoft.com/dk-grid/row/sorting) live example.
{% endhint %}
## Allowing the sorting operation
To allow the user to sort the DikeGrid rows, you must set a flag at the grid scope by providing an input property named `allowSorting`. Its **default** value is **false**.
{% code title="row-sorting.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowSorting` property at **runtime**.
{% endhint %}
Open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel) for the live example and **mark** the **Allow Sorting** checkbox.
## Sortable columns
If you want the user to sort the DikeGrid rows by a column, mark the column as **sortable**. Its default value is **false**.
{% hint style="info" %}
You can only make **sortable** data columns, not column groups.
{% endhint %}
See the following column configuration:
{% code title="row-sorting.component.html" %}
```markup
```
{% endcode %}
We have the following **sortable** columns with the previous configuration: **Name** and **Surname** under the **Complete Name** group, **Age** column under the **Personal Info** group, and the **Hire Date** column.
You can make a column **sortable** at **runtime** using the corresponding **API**. For example, see the following code snippet:
{% code title="row-sorting.component.ts" %}
```typescript
onSetColumnSortable(): void {
if (this.columnControl.valid) {
// Get the selected column:
const column = this.columnControl.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
// Toggle the sortable flag for the selected column:
this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
}
}
}
```
{% endcode %}
As you can see, once you have got the column you want to set as **sortable** or **non-sortable**, use the `DikeGridColumnDef` service instance to change the column state.
{% hint style="success" %}
Before using the **column API**, you must grab the instance of the [`DikeGridColumnDef`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridcolumndef) service.
{% endhint %}
## Sorting rows through the UI
Once you define columns as **sortable**, you can sort the DikeGrid rows by these sortable columns.
### Clicking on the column header
You can sort the DikeGrid rows by clicking on the column header.
When you have clicked on the column header of a **sortable** column, you will see an **arrow** that indicates the **direction** of the sorting operation.
### Column Context Menu
When you define a column as **sortable**, you will see the sorting submenu in the [Column Context Menu](https://docs.dikesoft.com/fundamentals/grid-structure/column-context-menu). Then, you will see the sorting options.
## DikeGrid Sorting API
You can sort the DikeGrid rows using the **sorting API**.
Before using the **sorting API**, you must retrieve the corresponding DikeGrid instance by querying the component's view.
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
@Component({
selector: 'row-sorting',
templateUrl: './row-sorting.component.html',
styleUrls: ['./row-sorting.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSortingComponent implements OnInit {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
//...
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The **sorting API** is an instance of type [`DikeGridSorting`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridsorting) under the [`DikeGridComponent`](https://docs.dikesoft.com/reference/components/dkgridcomponent) through the **read-only** property named `sorting`.
{% endhint %}
The **sorting API** has the following methods:
| Method | Description |
| ---------------------- | --------------------------------------------------------------------------------------------- |
| `sortBy()` | It sorts the DikeGrid rows by the given column in the given direction. |
| `isDikeGridSortedBy()` | It evaluates if the DikeGrid is sorted by the given column. |
| `getCurrentSortable()` | It returns the column and the direction of the sorting operation. Otherwise, it returns null. |
| `clearSorting()` | It removes the current sorting operation. |
{% hint style="success" %}
For further details, see the [`DikeGridSorting`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridsorting#methods) definition.
{% endhint %}
{% hint style="info" %}
You can sort the DikeGrid rows only by **one** column **sortable** at a time.
{% endhint %}
To see the use of the **sorting API**, we have created the following UI:
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
onSelectionChange(data: MatSelectChange): void {
const column = data.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
if (!column.sortable) {
this.rowSortingForm.get('direction').disable();
} else {
this.rowSortingForm.get('direction').enable();
}
}
}
onSortBy(): void {
if (this.rowSortingForm.valid) {
const column = this.rowSortingForm.get('column').value as DikeColumnDef;
const direction = this.rowSortingForm.get('direction').value as 'asc' | 'desc';
// if the DikeGrid instance is sorted, get the current columns and the sort direction:
const currentSortable = this.dikeGrid.sorting.getCurrentSortable();
/**
* We will sort the DikeGrid rows, if only if:
*
* 1. The DikeGrid is not sorted.
* 2. Or, the DikeGrid is sorted but the selected column is different than the current column.
* 3. Or, the DikeGrid is sorted by the selected column but the selected direction is different.
*/
if (isDikeDataColumnDef(column) &&
(!currentSortable || currentSortable.sortedColumn.columnId !== column.columnId || currentSortable.type !== direction)) {
this.dikeGrid.sorting.sortBy(column, direction);
}
}
}
onSetColumnSortable(): void {
if (this.columnControl.valid) {
// Get the selected column:
const column = this.columnControl.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
// Toggle the sortable flag for the selected column:
this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
}
}
}
```
{% endtab %}
{% endtabs %}
The previous HTML code generates the following output:
With the previous UI, you can do the following tasks:
1. You can choose any data column from the dropdown control. Sortable columns have an icon indicating they are sortable.
2. You can change the sortable state of a data column.
3. To sort the DikeGrid rows, you must select the direction of the sorting operation. Then click on the **Sort By** button.
It is essential to notice that we are **listening** to any change in the **DikeGrid's columns**, attaching a callback to the `columnsChange` output property from the [`DikeGridComponent`](https://docs.dikesoft.com/reference/components/dkgridcomponent).
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
onColumnsChange(columns: DikeColumnDef[]): void {
this.gridColumns = this.flatColumns(columns);
// Clear selection:
this.rowSortingForm.patchValue({ column: null, direction: '' });
}
```
{% endtab %}
{% endtabs %}
Every time we receive a new set of columns, we flat them into a single array, invoking the method `flatColumns()`. So indeed, we are **flattening** the **column groups**, traversing them **recursively**.
{% code title="row-sorting.component.ts" %}
```typescript
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
```
{% endcode %}
If you see the content of the **dropdown** control, you see the columns **Employee Id**, **Personal Info** group, **Complete Name** group, then **Name** and **Surname** columns, etc.
The column groups are **disabled**, such as **Personal Info** and **Complete Name**.
## Sort event
Every time we sort the DikeGrid rows, the DikeGrid instance emits the related event.
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
onSortChange(sortedBy: DikeColumnSortEvent): void {
console.log('Sort change: ', sortedBy);
}
```
{% endtab %}
{% endtabs %}
The emitted object is of type `DikeColumnSortEvent`, which contains the **column** and the **direction** of the current sorting operation.
{% hint style="success" %}
Open the **dev console** to see the output of the `sortChange` event.
{% endhint %}
{% hint style="info" %}
You can also listen to the `sortChange` event from the [`DikeGridSorting`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridsorting#events) instance.
{% endhint %}
## Summary
To perform the sorting operation, you must allow it by providing an input property named `allowSorting`. Then, when creating columns, you can define them as **sortable**. Nevertheless, you can change their state at **runtime** using the related **API**. You can perform the sorting operation through the **UI** or the **sorting API**.
### Complete code for this section
{% tabs %}
{% tab title="row-sorting.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-sorting.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatSelectChange } from '@angular/material/select';
import { Subscription } from 'rxjs';
import { DikeColumnDef, DikeColumnSortEvent, DikeGridComponent,
DikeGridDataSourceInput, isDikeDataColumnDef, isDikeGroupColumnDef
} from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
import { SampleData } from 'app/services/sample-data.service';
@Component({
selector: 'row-sorting',
templateUrl: './row-sorting.component.html',
styleUrls: ['./row-sorting.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSortingComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
gridColumns: DikeColumnDef[];
rowSortingForm: FormGroup;
columnControl: FormControl;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) { }
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
this.createForm();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
onSelectionChange(data: MatSelectChange): void {
const column = data.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
if (!column.sortable) {
this.rowSortingForm.get('direction').disable();
} else {
this.rowSortingForm.get('direction').enable();
}
}
}
onSortBy(): void {
if (this.rowSortingForm.valid) {
const column = this.rowSortingForm.get('column').value as DikeColumnDef;
const direction = this.rowSortingForm.get('direction').value as 'asc' | 'desc';
// if the DikeGrid instance is sorted, get the current columns and the sort direction:
const currentSortable = this.dikeGrid.sorting.getCurrentSortable();
/**
* We will sort the DikeGrid rows, if only if:
*
* 1. The DikeGrid is not sorted.
* 2. Or, the DikeGrid is sorted but the selected column is different than the current column.
* 3. Or, the DikeGrid is sorted by the selected column but the selected direction is different.
*/
if (isDikeDataColumnDef(column) &&
(!currentSortable || currentSortable.sortedColumn.columnId !== column.columnId || currentSortable.type !== direction)) {
this.dikeGrid.sorting.sortBy(column, direction);
}
}
}
onSetColumnSortable(): void {
if (this.columnControl.valid) {
// Get the selected column:
const column = this.columnControl.value as DikeColumnDef;
if (isDikeDataColumnDef(column)) {
// Toggle the sortable flag for the selected column:
this.dikeGrid.columnDef.setColumnSortable(column, !column.sortable);
}
}
}
onSortChange(sortedBy: DikeColumnSortEvent): void {
console.log('Sort change: ', sortedBy);
}
onColumnsChange(columns: DikeColumnDef[]): void {
this.gridColumns = this.flatColumns(columns);
// Clear selection:
this.rowSortingForm.patchValue({ column: null, direction: '' });
}
private flatColumns(columns: DikeColumnDef[]): DikeColumnDef[] {
return columns.reduce((accum, column) => {
if (isDikeGroupColumnDef(column) && !!column.children && column.children.length > 0) {
return [ ...accum, column, ...this.flatColumns(column.children) ];
}
return [ ...accum, column ];
}, [ ]);
}
private createForm(): void {
this.columnControl = new FormControl(null, Validators.required);
this.rowSortingForm = new FormGroup({
column: this.columnControl,
direction: new FormControl({ value: '', disabled: false }, Validators.required),
});
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}