Loading dates in Kendo UI Grid

Question

I have a problem with setting a date field in the Kendo UI Grid, with ISO Date format (YYYY-MM-DD).

If I initialize the data source like this:

var gridDataSource = new kendo.data.DataSource({
    data: [{
        id: 1, description: 'Test 1', begin: '2012-10-01'
    }],
    schema: {
        model: {
            id: 'id',
            fields: {
                id: { type: 'number' },
                description: { type: 'string' },
                begin: { type: 'date' }
            }
        }
    }
});

Then the date is displayed correctly:

But if i set it with the data() function of the data source like this:

gridDataSource.data([{
    id: 2, description: 'Test 2', begin: '2012-10-01'
}]);

Then the date is not displayed correctly and the inline editor is not working correctly:

Here is the demo for this problem.

Am I doing something wrong?

Answer 1

If you set the culture kendo.culture('en-GB') to be the culture that you want it to be this will allow you to display the kendo date in what ever (culture) format you specified it to be. Then you can use the kendo.parseDate(variable, "yyyy/MM/dd"); just before you sent the date server side (This must be done for each value). Just watch the case (upper and lower) of the "yyyy/MM/dd" see this link

Answer 2

Please try with the below code snippet. Please check the format in column.

<script type="text/javascript">
        $(document).ready(function () {
            var gridDataSource = new kendo.data.DataSource({
                data: [{
                    id: 1, description: 'Test 1', begin: '2012-10-01'
                }],
                schema: {
                    model: {
                        id: 'id',
                        fields: {
                            id: { type: 'number' },
                            description: { type: 'string' },
                            begin: { type: 'date' }
                        }
                    }
                }
            });

            $('#grid').kendoGrid({
                dataSource: gridDataSource,
                scrollable: true,
                sortable: true,
                toolbar: ['create'],
                columns: [
            { field: 'id', title: 'ID', width: 'auto' },
            { field: 'description', title: 'Description', width: 'auto' },
            { field: 'begin', title: 'Begin', width: 'auto', format: "{0:yyyy-MM-dd}" },
            { command: ['edit', 'destroy'], title: '&nbsp;', width: '172px' }
        ],
                editable: {
                    mode: 'inline',
                    confirmation: false
                }
            });

            $('#dataButton').click(function () {
                gridDataSource.data([{
                    id: 2, description: 'Test 2', begin: '2012-10-02'
                }]);
            });
        });

    </script>

Demo