CODEWITHSUNDEEP
angularsortingag-grid
Semir Hodzic
Semir Hodzic

Reputation: 665

Sorting Number in Custom Header Ag-Grid?

Does Ag-grid column api have information about sorting order number in custom header component ?

Upvotes: 1

Views: 5437

Answers (3)

FirstVertex
FirstVertex

Reputation: 3785

We must attach the event listener to the grid api's sortChange event, rather than the column api's. That's because the sortNumber could change based on a click of a different column. You can see comment to that effect in sourcode of HeaderComp. In the example below, an event stream is created using rxjs fromEvent of grid api sortChange which is piped to my custom computation of this column's sortNumber.

This solution uses the available public API of ag-grid with type checking. In current Api we should not use sort and sortedAt which are private properties of Column, but we have getSort() and getSortedAt(). Although getSortedAt() does not appear in the documentation of GridColumn we can see it if we inspect directly the typings of Column

import { Component, OnDestroy } from '@angular/core';
import { IHeaderAngularComp } from 'ag-grid-angular';
import { AgGridEvent, Column, IHeaderParams } from 'ag-grid-community';
import { Subject , fromEvent } from 'rxjs';
import { takeUntil, tap } from 'rxjs/operators';

@Component({
  selector: 'my-datagrid-header-cell',
  templateUrl: './datagrid-header-cell.component.html',
  styleUrls: ['./datagrid-header-cell.component.scss']
})
export class DatagridHeaderCellComponent implements IHeaderAngularComp, OnDestroy {
    protected destroyed$ = new Subject<void>();
    ngOnDestroy(): void {
        this.destroyed$.next();
    }
    public params: IHeaderParams;
    public sortNumber = 0;
    public showSortNumber = false;

    agInit(params: IHeaderParams): void {
        this.params = params;

        fromEvent(this.params.api, 'sortChanged').pipe(
            takeUntil(this.destroyed$),
            tap((e: AgGridEvent) => this.setMultiSortOrder(e))
        ).subscribe();
    }

    private setMultiSortOrder(e: AgGridEvent) {
        if (!e || !e.columnApi) return;
        let sortedColumns = (e.columnApi.getAllDisplayedColumns() || [])
            .filter((col: Column) => col.getSort())
            .sort((a,b) => a.getSortedAt() - b.getSortedAt());

        this.sortNumber = sortedColumns.findIndex(col => col === this.params.column) + 1;
        this.showSortNumber = this.sortNumber > 0 && sortedColumns.length > 1;
    }
  }

And finally, this is how we can invoke the sortNumber display from the markup:

<span ref="eSortOrder"
  class="ag-header-icon ag-sort-order"
  *ngIf="showSortNumber">{{sortNumber}}</span>

Ag-grid documentation references:

  1. Ag Grid Events - see SortChangedEvent
  2. Grid Column Api - see getAllDisplayedColumns()
  3. Grid Column - see getSort()
  4. Grid Column Properties - see sort and sortedAt

Upvotes: 1

Semir Hodzic
Semir Hodzic

Reputation: 665

I have resolved this issue using plain js. It can be useful to someone. Please check to example plunk here : Angular 2 sorting order ag-grid I am using this method to gain sorting numbers and add them to DOM:

checkSortOrder() {
const sortingArray = this.params.api.getSortModel();
let j: number;
if (sortingArray.length > 1) {
  setTimeout(() => {
    for (j = 0; j < sortingArray.length; j++) {
      this.sortNumber = j + 1;
      const sortingDom = <HTMLElement>document.getElementById('sortingOrder' + sortingArray[j].colId.replace(/\s/g, ''))
      sortingDom.innerHTML = this.sortNumber.toString();
    }
  });
}

}

Upvotes: 0

Paritosh
Paritosh

Reputation: 11570

Check this plunk: ag-grid: Custom Header component - get sort order

You can get it using IHeaderParams within CustomHeaderComponent.

Sort the columns Age and then Year keeping Shift pressed. You could see the sorting is being done, the array or columns are being loogged in the console with the appropriate order.

onSortChanged() {
  console.log(this.params.api.sortController.getColumnsWithSortingOrdered());
}

Now you can add your logic to set the appropriate sort order in your custom header component.

Upvotes: 1

Related Questions