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.
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:
row-sorting.component.ts
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);
}
}
}
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.
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
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.
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);
}
}
}
The previous HTML code generates the following output:
With the previous UI, you can do the following tasks:
You can choose any data column from the dropdown control. Sortable columns have an icon indicating they are sortable.
You can change the sortable state of a data column.
To sort the DikeGrid rows, you must select the direction of the sorting operation. Then click on the Sort By button.
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.
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.
The emitted object is of type DikeColumnSortEvent, which contains the column and the direction of the current sorting operation.
Open the dev console to see the output of the sortChange event.
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.
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<T> instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;
dkgDataSource: DikeGridDataSourceInput<Employee>;
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<Employee>): 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();
});
}
}
Before using the column API, you must grab the instance of the service.
When you define a column as sortable, you will see the sorting submenu in the . Then, you will see the sorting options.
The sorting API is an instance of type under the through the read-only property named sorting.
For further details, see the definition.
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 .
You can also listen to the sortChange event from the instance.
