Kendo - Base Q3

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [{
        "id": 1,
        "source": "Hydro",
        "percentage": 22,
        "explode": true,
        "date": "2012-11-30T16:41:07.43"
    },
    {
        "id": 2,
        "source": "Solar",
        "percentage": 2,
        "date": "2012-11-30T16:41:07.43"
    },
    {
        "id": 3,
        "source": "Nuclear",
        "percentage": 49,
        "date": "2012-11-30T16:41:07.43"
    },
    {
        "id": 4,
        "source": "Wind",
        "percentage": 27,
        "date": "2012-11-30T16:41:07.43"
    }],
    schema: {
        model: {
            id: "id",
            fields: {
                id: {type: "number"},
                source: {type: "string"},
                percentage: {type: "number"},
                date: { 
                    type: "date", 
                    parse: function(data) { 
                        return kendo.parseDate(data, "yyyy-MM-ddTHH:mm:ss.ff");
                    } 
                }
            }
        }
    }
})

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [
        {"field": "source"}, 
        {"field": "percentage"}, 
        {"field": "date", "template": "#= kendo.toString(date, \"MM/dd/yyyy hh:mm\") #"}
    ]
});