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

Answer 2

h3li0s answer helped me out alot, it needs a few tweaks like so though:

public sortChange(sort: SortDescriptor[]): void {
    sort.map((item) =>
    {
        if (item.field == "daysLeft")
        {
            if (item.dir === undefined) {
                this.view.data = this.items;
            } else {
                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.sort["dir"] = item.dir;
         } else {
             this.sort = sort;
             this.loadData();
         }
    });
}

and don't forget banana in a box for data and sort in the html like: [(sort)]="sort"

Answer 3

add sort Change as follow

    (sortChange)="sortChange($event)"

and add column which need to be desc first instead of ascending at the following list

      public resortColumn:any[] =['UnitPrice'];

define sort change function as follow

        public sortChange(sort: SortDescriptor[]): void {
  if(this.resortColumn.indexOf(sort[0].field) != -1 )
  {
    if(sort[0].dir == "desc")
    {
      sort[0].dir = undefined;
    }
    else if(sort[0].dir == "asc")
    {
       sort[0].dir = "desc";
    }
    else if(sort[0].dir == undefined)
    {
        sort[0].dir = "asc";
    }
  }

    this.sort = sort;
    this.loadProducts();
}

[a link] https://stackblitz.com/edit/angular-dsmrz2-37jaa5?file=app/app.component.ts