Change order of asc and desc in grid sort

[Eralmidia]

I was just wondering if there is any way to change the order of asc and desc in the grid is applied when clicking the sort arrow? Ideally on a application level.

For instance, we have grid a column which displays a failure count. The users of this grid is commonly interested only in the rows with the highest number of failures. But by default clicking on the sorting arrow in the column sorts ascending first, then descending on the second click, resulting in the users have to click twice every time they need to sort at grid.

First click results in only rows which are of now interest to the user:

While second click gets us the interesting data:

[ddaribo]

Hi @Eralmidia,
Thank you for reaching out!

Yes, this can be achieved on application level with a workaround approach. It involves retemplating the sorting indicators in order to easily add a click event handler to the icons. The default igx-icons can be specified, so that the original look is kept:

    <ng-template igxSortHeaderIcon let-header>
      <igx-icon (click)="handleCustomSortOrder(header)">arrow_upward</igx-icon>
    </ng-template>
    <ng-template igxSortAscendingHeaderIcon let-header>
      <igx-icon (click)="handleCustomSortOrder(header)">arrow_upward</igx-icon>
    </ng-template>
    <ng-template igxSortDescendingHeaderIcon let-header>
      <igx-icon (click)="handleCustomSortOrder(header)">arrow_downward</igx-icon>
    </ng-template>

The click handler:

public handleCustomSortOrder(header: IgxGridHeaderComponent) {
    const column = header.column;
    var nextdir = 1;
    if (column.sortable) {
      var sorted = this.grid.sortingExpressions.find(
        (x) => x.fieldName === column.field
      );

      if (sorted !== undefined) {
        if (sorted.dir === 1) {
          nextdir = 2;
        }

        if (sorted.dir === 2) {
          nextdir = 0;
        }

        this.grid.sort({
          fieldName: column.field,
          dir: nextdir,
          ignoreCase: true,
        });
      } else {
        this.grid.sort({
          fieldName: column.field,
          dir: nextdir,
          ignoreCase: true,
        });
      }
    }
  }

This essentially sorts by the next direction just before the grid performs the sorting, which results in seemingly “skipping” the default "next". Thus, the order becomes None -> Descending -> Ascending -> None.
However, please keep in mind that in case you are handling either the grid’s sorting or sortingDone events, they would be triggered twice for each sort operation, as two sorts are performed on each icon click.

Here you can find a small StackBlitz sample demonstrating this suggestion. I hope it helps!