Kendo UI Grid Date Group

by gonglei

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">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="grid"></div>

JavaScript

(function($, undefined){
    'use strict';
    
    var testData = [
        { id: 1, title: 'Title1', created: new Date(2012, 1, 1, 9, 0, 0) },
        { id: 2, title: 'Title3', created: new Date(2012, 3, 3, 9, 0, 0) },
        { id: 3, title: 'Title5', created: new Date(2012, 4, 4, 9, 0, 0) },
        { id: 4, title: 'Title3', created: new Date(2012, 3, 3, 9, 0, 0) },
        { id: 5, title: 'Title1', created: new Date(2012, 1, 1, 9, 0, 0) }
    ];
        
    var testDs = new kendo.data.DataSource({
        data: testData,
        schema: {
            model: {
                id: 'id',
                fields: {
                    id: { type: 'number' },
                    title: { type: 'string' },
                    created: { type: 'date'},
                    createdDt: { type: 'string' },
                }
            },
            parse: function(results) {
                for (var i = 0; i < results.length; i++) {
                    results[i].createdDt = kendo.toString(results[i].created, 'yyyy-MM-dd');
                }
                return results;
            }
        },
        group: { field: 'createdDt', dir: 'desc' }
    });
    
    $(document).ready(function(){
        $('#grid').kendoGrid({
            dataSource: testDs,
            columns: [
                { field: 'title', title: 'Title' },
                { field: 'createdDt', title: 'Created Date', 
                    groupHeaderTemplate: '#= kendo.toString(kendo.parseDate(value), "dd-MMM-yyyy") #' }
            ]
        });
    });
        
})(jQuery);