Sorting dates in Kendo Grid Angular

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