Kendo UI for Angular custom sorting grid columns

h3li0s

I have the following column in Kendo Grid (Jquery's UI) which has a special sorting method based on customer needs.

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 built the same grid in Kendo UI for Angular using Angular 6 and I've got everything working except this sorting method above. All other columns use standard sorting.

<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 accompany this in Kendo UI for Angular?

h3li0s

Since apparently this is not currently available, I wrote a temporary solution for my specific problem. If it helps others, please post here.

In my grid I added:

(sortChange)="sortChange($event)"

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

Related

Kendo UI for Angular custom sorting grid columns

h3li0s I have the following column in Kendo Grid (Jquery's UI) which has a special sorting method based on customer needs. field: "daysLeft", title: "Accessible", width: 130, sortable: { compare: function (a, b, descending) { if (a.daysLeft == 'Not start

Kendo UI for Angular custom sorting grid columns

h3li0s I have the following column in Kendo Grid (Jquery's UI) which has a special sorting method based on customer needs. field: "daysLeft", title: "Accessible", width: 130, sortable: { compare: function (a, b, descending) { if (a.daysLeft == 'Not start

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI Grid for Angular to dynamically reorder columns

Exquisite I have a Kendo UI for Angular and not one for JQuery, and I've been trying to see how to reorder the columns dynamically. The API allows enabling it by reordering like this: <kendo-grid [reorderable]="true"...../> But I want tp to be able to reorder

Kendo UI for Angular2 - How to dynamically add columns to grid

Jarreg For Grid compomemet, if I already have several columns predefined in html, but the result set can have many other columns on the predefined columns, how can I add these columns dynamically? After I retrieve the data, I don't know what these extra column

Kendo UI for Angular2 - How to dynamically add columns to grid

Jarreg For Grid compomemet, if I already have several columns predefined in html, but the result set can have many other columns on the predefined columns, how can I add these columns dynamically? After I retrieve the data, I don't know what these extra column

Kendo UI for Angular2 - How to dynamically add columns to grid

Jarreg For Grid compomemet, if I already have several columns predefined in html, but the result set can have many other columns on the predefined columns, how can I add these columns dynamically? After I retrieve the data, I don't know what these extra column

Kendo UI for Angular2 - How to dynamically add columns to grid

Jarreg For Grid compomemet, if I already have several columns predefined in html, but the result set can have many other columns on the predefined columns, how can I add these columns dynamically? After I retrieve the data, I don't know what these extra column

Kendo UI for Angular2 - How to dynamically add columns to grid

Jarreg For Grid compomemet, if I already have several columns predefined in html, but the result set can have many other columns on the predefined columns, how can I add these columns dynamically? After I retrieve the data, I don't know what these extra column

Kendo UI Grid Template Columns

Ethan Saddji I have this grid in my page and it works great: @(Html.Kendo().Grid<SalaryAdmin.Classes.ReturnedCompareHoghough>() .Name("Grid") .EnableCustomBinding(true) .BindTo(Model.Comparehoghough) .Columns(columns => { columns.Te

Kendo UI Grid Template Columns

Ethan Saddji I have this grid in my page and it works great: @(Html.Kendo().Grid<SalaryAdmin.Classes.ReturnedCompareHoghough>() .Name("Grid") .EnableCustomBinding(true) .BindTo(Model.Comparehoghough) .Columns(columns => { columns.Te

Custom Commands in Kendo UI Grid

Said Roohullah Allem I want to write some code to display the details of my item using the Action method. @(Html.Kendo().Grid<Jahan.Blog.Model.Article>() .Name("ArticleAdmin").Navigatable() .Resizable(c => c.Columns(true)) .HtmlAt

Kendo UI Grid, sorting data source groups

Ben Cameron I have a page with a kendo grid on it. It is calling ajaz web request to get its data. After the data is returned, it will be grouped on the front end. The problem I'm having is sorting the groups. What's the best way to do this? My MVC view code l

kendo ui grid filter, sorting and pagination in server

julius_am I am using a Kendo grid and want to perform filtering, sorting and pagination in the server. I understand that I should add to the dataSource: serverPaging: true, serverSorting: true But how do I tell the grid/datasource which URL should be used for