CODEWITHSUNDEEP
kendo-uikendo-grid
Santhosh
Santhosh

Reputation: 38

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

Upvotes: 1

Views: 717

Answers (1)

David
David

Reputation: 6111

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

Upvotes: 2

Related Questions