Unable to format date with KendoUI Grid and Knocko

Question

I am having trouble getting a date to parse with the Kendo Grid. I am using Knockout-Kendo to assist with the data-bindings.

The date-string in the json response that I am attempting to parse looks something like 2012-03-13T00:00:00.

The column definition for the Kendo grid contains format: '{0:MM/dd/yyyy}' which seems to work on another grid that isn't using Knockout-Kendo to parse the exact same date string.

I have created (well re-using from a separate question) a jsFiddle that demonstrates the issue fully here.

I want to stay away from row-templates only because I haven't figured out how to correctly set them up in a knockout binding, but I am completely open to alternative or "just correct" suggestions.

Answer 1

In case you are returning data as an Array you need to specify datetype

<script type="text/javascript">
$(document).ready(function () {
    $("#grid").kendoGrid({
        selectable: "row",
        groupable: true,
        sortable: true,
        navigatable: true,
        pageable: true,
        columns: [
                {
                    field: "RunDate",
                    title: "Run Date",
                    width: 100,
                    format: "{0:yyyy-MM-dd}"
                }
            ],
        dataSource: {
            type: "json",
            transport: {
                read: "api/Data"
            },
            serverPaging: true,
            pageSize: 5,
            schema: {
                data: "Data",
                total: "Count",
                model: { fields: { RunDate: { type: "date"} } } 
            }
        }
    });
});

Answer 2

It is possible to specify a dataSource in the configuration. You do need to still specify a data key, so the binding know that you are passing options and not just the data directly.

Can look like:

<div id="grid" data-bind="kendoGrid: {  
                                data: undefined,
                                dataSource: {
                                    data: SaleSearchResults,
                                   schema: { model: { fields: { SaleDate: { type: 'date' } } } }    
                                },

Updated fiddle here: http://jsfiddle.net/rniemeyer/EUFxg/

Answer 3

try formatting the date in the kendo grid this way

columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");