Unable to format date with KendoUI Grid and Knockout-Kendo

1
votes

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.

3
knockout.jskendo-uikendo-grid
In your sample the salesdate property is containing a string and not the data. So the Kendo grid format: '{0:MM/dd/yyyy}' cannot be applied to a string. If you have have proper dates it is working: jsfiddle.net/FVUpa – nemesv
Your suggestion does work if I had control over the service datetime serialization to spit out what you showed me. Dang, I could totally get this to work if I could define the scheme in the dataSource with knockout-kendo. I have the exact same string working parse working ok when the dataSource w/ scheme is defined dataSource: { data: myData, schema: { model: { fields: { SaleDate: { type: 'date' } } } } }. – Mr. Young

3 Answers

4
votes

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/

0
votes

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"} } } 
            }
        }
    });
});

0
votes

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\") #");