Kendo UI for Angular custom sorting grid column

Question

I have the following column in a Kendo Grid (UI for Jquery) with a special sort method based on the needs of my customers.

field: "daysLeft",
title: "Accessible",
width: 130,
sortable: {
  compare: function (a, b, descending) {
    if (a.daysLeft == 'Not started') return 1;
    if (b.daysLeft == 'Not started') return -1;
    if (a.end < b.end) return -1;
    if (a.end > b.end) return +1;
    return 0;
  }
}

I've build the same grid in Kendo UI for Angular, using Angular 6, and I've gotten everything to work except for this sort method above. All other columns are using standard sort.

<kendo-grid class="m-2"
[data]="view"
[pageSize]="pageSize"
[skip]="skip"
[pageable]="gridSettings()"
filterable = "menu"
[filter]="state.filter"
[height]="450"
[sortable]="{
  allowUnsort: true,
  mode: multiple ? 'multiple' : 'single'
}"
[sort]="state.sort"
(pageChange)="pageChange($event)"
(dataStateChange)="dataStateChange($event)"
>

My current dataStateChange function:

public dataStateChange(state: DataStateChangeEvent): void {
  this.state = state;
  this.view = process(this.items, this.state);
}

Is it possible to accomplice this in Kendo UI for Angular?

Answer 1

Because apparently this is currently not available, I wrote a temporary solution for my particular problem. Posting it here if it might help anyone else.

in my grid I added:

(sortChange)="sortChange($event)"

And my sortChange function looks like this:

public sortChange(sort: SortDescriptor[]): void {
  sort.map((item) =>
  {
    if (item.field == "daysLeft")
    {
      if(item.dir === undefined) this.view.data === this.items;
      var data = this.view.data.sort((a, b) => {
      var aend = parseInt(a.end.substr(6));
      var bend = parseInt(b.end.substr(6));
      if (a.daysLeft == 'Not started') return +1;
      if (b.daysLeft == 'Not started') return -1;
      if (aend < bend) return -1;
      if (aend > bend) return +1;
      return 0;
    });
    if(item.dir === "desc") {
      data = data.reverse();
    }
     this.view.data = data; 
  }
 });
}

this.view is my GridDataResult object