Kendo Grid中的“按日期排序”列用于不考虑AM / PM的角度

Question

I have a Kendo grid for angular in my component which is populated with data based on a pre-defined model. I am sorting the grid on a 'Date' field (StartTime). While sorting, the AM/PM is not taken into consideration as can be seen in the screenshot below.

The highlighted date should ideally be the third one in the sorting order.

Following are the relevant code snippets:

Model:

export interface Summary {
...
StartTime: Date;
...
}

Sort descriptor:

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

This statement is called while loading the grid:

this.gridData = orderBy(this.gridData, this.sort);

What am I missing here? How can I make the grid sort take AM/PM into consideration?

Any help is greatly appreciated.

Answer 1

The Grid data items need to contain actual JavaScript Date Objects (as opposed to string representations) so that the built-in Grid formatting, sorting and filtering functionalities can work as expected:

DOCS

If the data comes serialized from a remote service, it needs to be mapped such that all date strings are converted to actual dates, otherwise they will be sorted like strings.

Here is an example where the data contains actual dates and they are sorted as expected:

EXAMPLE

{
        "ProductID": 1,
        "ProductName": "Chai",
        "SupplierID": 1,
        "CategoryID": 1,
        "QuantityPerUnit": "10 boxes x 20 bags",
        "UnitPrice": 18,
        "UnitsInStock": 39,
        "UnitsOnOrder": 0,
        "ReorderLevel": 10,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
        },
        "FirstOrderedOn": new Date(2018, 4, 2, 18, 46, 53)
    }

<kendo-grid-column field="FirstOrderedOn" title="First Ordered On"
      width="240" filter="date" 
      format="{0:MM/dd/yyyy hh:mm:ss a}">
    </kendo-grid-column>