Search code examples
kendo-uikendo-grid

Sorting dates in Kendo Grid Angular

How to sort the dates in Kendo Grid Angular? Kendo gird taking the date values as string and sorts it

1

Solution

  • When you configure the grid's dataSource property, you should be defining the schema. If you set the schema's model's field's type to date then you should get the expected results.

    For example:

    $("#grid").kendoGrid({
  dataSource: {
    transport: {
      read: "https://my-api/my-endpoint"
    },
    schema: {
      model: {
        fields: {
          Date: { type: "date" }
        }
      }
    }
  },
  sortable: true,
  columns: [
    { field: "Date", title: "Date", format: "{0:dd-MM-yyyy}" }
  ]
});

    Demo: https://dojo.telerik.com/ugItIKob

    Update

    You indicated that you needed an Angular example. In this situation, define the property representing the date field as a Date and format it in template using the date pipe.

    For example:

    import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
        <kendo-grid [kendoGridBinding]="gridData" [sortable]="true">
            <kendo-grid-column field="ProductId" title="ID"></kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name"></kendo-grid-column>
            <kendo-grid-column field="Cost" title="Price">
                <ng-template kendoGridCellTemplate let-dataItem>
                    {{ dataItem.Cost | currency:'USD':'symbol' }}
                </ng-template>
            </kendo-grid-column>
            <kendo-grid-column field="PurchaseDate" title="Date">
                <ng-template kendoGridCellTemplate let-dataItem>
                    {{ dataItem.PurchaseDate | date:'dd-MM-yyyy' }}
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  public gridData: IProduct[] = [
    {
      ProductId: 1,
      ProductName: 'Chai',
      Cost: 18,
      PurchaseDate: new Date('2022-08-03'),
    },
    {
      ProductId: 2,
      ProductName: 'Chang',
      Cost: 19,
      PurchaseDate: new Date('2023-08-03'),
    },
    {
      ProductId: 3,
      ProductName: 'Aniseed Syrup',
      Cost: 10,
      PurchaseDate: new Date('2021-08-17'),
    },
  ];
}

export interface IProduct {
  ProductId?: number;
  ProductName?: string;
  Cost?: number;
  PurchaseDate?: Date;
}

    Demo: https://stackblitz.com/edit/angular-metwta?file=src%2Fapp%2Fapp.component.ts