# 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 %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.dikesoft.com/rows/row-sorting.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.