Kendo Grid Выборочная угловая сортировка по одному полю

Question

Мне нужно добавить сортировку по одному полю по абсолютному значению значения. Это мой компонент:

<kendo-grid [kendoGridBinding]="gridData | async"
            [filterable]="true"
            [pageSize]="10"
            [pageable]="true"
            [sortable]="true"
            [height]="410">
  <kendo-grid-column *ngFor="let col of columns"
                     [field]="col.field"
                     [title]="col.title"
                     [filterable]="col.filter"
                     [filter]="col.type"
                     [format]="col.format"
                     [sortable]="col.sortable"


  ></kendo-grid-column>
</kendo-grid>

Это мой класс компонента:

export class GridComponent implements OnInit {

  gridData: any;

  columns = [
    { filter: true,  title: 'Name', field: 'name', type: 'text' },
    { filter: true,  title: 'Date', field: 'date', type: 'date', format: '{0:MM/dd/yyyy}' },
    { filter: true,  title: 'Amount', field: 'amount', type: 'numeric' , sortable: true},
    { filter: true,  title: 'Currency', field: 'currency'}
  ];

    constructor(private dataService: DataService) { }

  ngOnInit() {
    this.preloadData();
  }

  private preloadData() {
    this.gridData = this.dataService.getData();
  }
}

Я попытался добавить вместо сортируемого: true это:

sortable: {compare: function(a,b) { return Math.abs(a) > Math.abs(b)} }

Однако этоговорит мне, что эта функция ожидает возврата логического значения. Итак, есть ли способ, как реализовать свой собственный компаратор?

Answer 1

Вам нужно будет добавить обработчик событий sortChange и sort модель:

[sort]="sort"
(sortChange)="sortChange($event)"

и обработать его на TS:

public sortChange(sort: SortDescriptor[]): void {
  this.sort = sort;
  // Custom sort if it the field is amount and there is a direction
  if (sort[0].field === "amount" && sort[0].dir) {
    this.gridData.data = this.data.sort((a, b) =>
      this.amountSortFunction(a, b, sort[0].dir)
    );
  // If it is amount field but with no direction, then do the default sorting on name
  } else if (sort[0].field === "amount") {
    this.gridData.data = orderBy(this.data, [{ field: "name", dir: "asc" }]);
  // Other fields sorting
  } else {
    this.gridData.data = orderBy(this.data, sort);
  }
}

private amountSortFunction(a, b, direction) {
  if (direction === "asc") {
    return Math.abs(a.amount) - Math.abs(b.amount);
  }
  return Math.abs(b.amount) - Math.abs(a.amount);
}

Вы можете проверить демонстрацию здесь

Обратите внимание, что при наличии нумерации страниц со стороны сервера сортировка / фильтрация не будут работать должным образом, так как это будет только для той же страницы, что и у вас, ине для всех данных. Решение для этого для реализации фильтрации и сортировки на стороне сервера. Поэтому, если вы хотите отсортировать / отфильтровать, вы отправите запрос на сервер с просьбой сделать это, тогда ответ будет отсортирован / отфильтрован, и вам нужно будет заменить имеющиеся у вас данные на отсортированные / отфильтрованные.