Date Columns handling in grid

[Sapandeep]

I am getting  Data from Web API as array of object with one of the object's property/field as Date field. on API side its handled and returned as date . But when the data is retrieved after Ajax call ,  Grid (most likely Javascript as well) treat it as  string and grid shows something like "2019-01-01T00:00:00".

I  tried to use column.format to display it as date . which doesn't work .

Then i used Template to parse it using kendo.toString which worked, 

But when i export grid to Excel or PDF it still shows 2019-01-01T00:00:00 

Also i am trying to use Filter option on Column and trying to use Datetimepicker

column.filter.ui ="datetimepicker" 

which shows the date picker but filter doesn't work.

 

Could you please suggest some solution  or is there any step i am missing. 

 

Thanks

[Tsvetina]

Hello Sapandeep,

Make sure you declare the date fields in your Grid dataSource.schema:

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 550,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
            field:"OrderID",
            filterable: false
        },
        "Freight",
        {
            field: "OrderDate",
            title: "Order Date",
            format: "{0:MM/dd/yyyy}"
        }, {
            field: "ShipName",
            title: "Ship Name"
        }, {
            field: "ShipCity",
            title: "Ship City"
        }
    ]
});

This tells the DataSource to parse the OrderDate field to a Date value and it is then properly formatted and filtered by the Grid.

You can see an example in the Remote Binding demo.

Regards,
Tsvetina
Progress Telerik

[Sapandeep]

Thanks Tsvetina,

Thats resolves the issue for date field. I have dateTime field as well and setting type as "date" and setting  format: "{0:M/d/yyyy hh:mm:ss tt}" shows correct data on grid . however when i export the grid it shows only date part. is there any datetime field type or i have to write code to export Date time values on grid export call ?

[Tsvetina]

Hello Sapandeep,

On the client-side there is a single Date type that is used for both date and time values. To format the date in the Excel file, follow the instructions provided here:
Set Cell Format During Excel Export (see second example)

Here is a Dojo example where I apply the required format to the third Grid column:
https://dojo.telerik.com/ezajeDIk

Regards,
Tsvetina
Progress Telerik