Angular Kendo UI offers the ability to customize the way grid columns are sorted

Question

Angular Kendo UI offers the ability to customize the way grid columns are sorted

I'm currently working on a Kendo Grid (UI for Jquery) where I have implemented a custom sort method for a specific column based on my customers' requirements.

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 have replicated the same grid in Kendo UI for Angular, using Angular 6, and everything is working well except for the custom sort method mentioned above. All other columns are sorting correctly using the standard method.

<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)"
>

This is the function I am currently using for dataStateChange:

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

I am wondering if it is possible to achieve the same custom sorting functionality in Kendo UI for Angular.

angular typescript kendo-ui kendo-ui-angular2

Answer 1

Answer №1

Due to the current unavailability of a solution, I improvised a temporary fix for my specific issue. Sharing it here in case it can assist someone else.

In my grid setup, I included the following line:

(sortChange)="sortChange($event)"

Here is how my sortChange function is implemented:

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; 
  }
 });
}

The object this.view represents my GridDataResult.

Answer 2

Due to the current unavailability of a solution, I improvised a temporary fix for my specific issue. Sharing it here in case it can assist someone else.

In my grid setup, I included the following line:

(sortChange)="sortChange($event)"

Here is how my sortChange function is implemented:

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; 
  }
 });
}

The object this.view represents my GridDataResult.

Answer 3

Answer №2

Daedalus' assistance was invaluable to me, with just a few minor adjustments needed as follows:

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

Additionally, remember to include "banana in a box" for data and sort in the HTML like this: [(sort)]="sort"

Answer 4

Daedalus' assistance was invaluable to me, with just a few minor adjustments needed as follows:

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

Additionally, remember to include "banana in a box" for data and sort in the HTML like this: [(sort)]="sort"

Answer 5

Answer №3

adjust the sorting functionality by making the following changes:

    (sortChange)="sortChange($event)"

include a column that should be sorted in descending order first, rather than ascending, in the list below

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

specify the sorting change function as outlined below

        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();
}

Check out the changes in action by clicking on the following link: https://stackblitz.com/edit/angular-dsmrz2-37jaa5?file=app/app.component.ts

Answer 6

adjust the sorting functionality by making the following changes:

    (sortChange)="sortChange($event)"

include a column that should be sorted in descending order first, rather than ascending, in the list below

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

specify the sorting change function as outlined below

        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();
}

Check out the changes in action by clicking on the following link: https://stackblitz.com/edit/angular-dsmrz2-37jaa5?file=app/app.component.ts

Angular Kendo UI offers the ability to customize the way grid columns are sorted

Answer №1

Answer №2

Answer №3

Similar questions

Is there a secure alternative in Typescript for handling null values, such as a "safe operator"?

Setting up Angular 2 for Highcharts: A Comprehensive Guide

Embracing the power of Typescript with Node and Express?

Extending Error object disrupts `instanceof` validation in TypeScript

When attempting to run a Typescript Playwright test in Visual Studio Code's debug mode, it inexplicably fails to execute

Modify the data type of an object member based on its original type

Tips for positioning the border properly within a scrollable table

updating an object using its instance in angular: step-by-step guide

Transition your PHP application to Angular gradually

What is the simplest method to customize or enhance Angular 5 directives with Angular-material?

Angular version 4 JSONP request callback

What is the reason behind the return type of 'MyType | undefined' for Array<MyType>.find(...) method?

What is the best way to merge import all with different elements?

How can we identify all the foreign_key1 ids from a MySQL join table that have a specific foreign_key2 assigned to them that is within a specified list?

Managing errors with the RxJS retry operator

Dealing with the endless looping problem in Next.js caused by useEffect

Final Page Index (Backend pagination with Ng2-Smart-Table)

Enhance your Typescript code with a type guard that supports optional wrapped types

What is the alternative parameter to use instead of onChange in React Router v4?

Tips on avoiding updates to a defined object when a new object is filtered (created from the original object)