Sorting dates in Kendo Grid Angular - kendo-ui

Question

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

Answer 1

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