Date given as string doesn't sort properly

[Devi]

I have a column with short date time as string like: dd/mm/yyyy . for example: 08/04/2018

when I click on the title of the column name to sort it doesn't sort properly, but makes a mix

my html file:

<kendo-grid #grid="kendoGrid"
                [data]="gridView" id="GridID"
                [pageSize]="pageSize"
                [skip]="skip"
                [pageable]="true"
                [sortable]="{allowUnsort: allowUnsort, mode: multiple}"
                [resizable]="true"
                [sort]="sort"
                [scrollable]="{virtual: true}"
                (pageChange)="pageChange($event)"
                (sortChange)="sortChange($event)">

        <kendo-grid-messages noRecords="no Records">
        </kendo-grid-messages>

        <kendo-grid-column *ngFor="let item of gridColumnData" [headerClass]="'t-head'" [hidden]="item.hide" [field]="item.field" [title]="item.title">
        </kendo-grid-column>

    </kendo-grid>

 

my .ts file:

public sort: SortDescriptor[] = [{
        field: '',
        dir: 'asc'
    }];

public sortChange(sort: SortDescriptor[]): void {
        this.sort = sort;
    }

[Dimiter Topalov]

Hi Devi,

The data the Grid is bound to needs to contain actual JavaScript Date values (as opposed to strings) for the Grid built-in sorting and filtering functionalities to work as expected. When the respective field of the data item the Grid is bound to contains a string value, the data items are sorted as strings. To have them sorted as dates, you will need to map the incoming data such that all strings are converted to valid JavaScript dates (or otherwise ensure this), e.g.:

https://plnkr.co/edit/96WkJnofxjiHV6GmaZjj?p=preview

You can use the column format property to specify the desired formatting. The second example in the following section of our documentation demonstrates how to specify the data type (used for rendering the built-in filtering UI) for each column and use a *ngFor structural directive to generate the columns similar to the approach, used in the provided code snippet:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/hidden/#toc-using-structural-directives

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Devi]

Your answer is excellent and solved the problem for me. Thank you!