Kendo UI MVVM Sample: Example 03

Example of using the Kendo UI MVVM to bind a model to simple html elements. Demonstrates how changes to the ViewModel is reflected in the View.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="grid" data-role="grid" data-bind="source: reportSource"
    data-columns='[{"field":"Name", "title": "Name"}, {"field":"UserName", "title": "Username" }, {"field":"CreatedDate", "title": "Created At", "format": "{0:dd/MM/yyyy hh:mm:ss}"}]'></div>

JavaScript

var viewModel =
    kendo.observable({
        reportSource: new kendo.data.DataSource({
            transport: {
                    read: function (o) {
                        //$.ajax({
                            //type: "GET",
                            //url: url,
                            //data: '{}',
                            //contentType: "application/json; charset=utf-8",
                            //dataType: "json",
                            //cache: false,
                            //success: function (data) {
                            // assume that data is response to the ajax call
                            data =
                                [
                                    {"Name":"abc","UserName":"def","CreatedDate":"2014-04-07T11:00:00"},
                                    {"Name":"ghi","UserName":"jkl", "CreatedDate":"2014-04-07T11:28:14.097"}
                                ];
                            o.success(data);                                
                            //},
                            //error: function (xhr, ajaxOptions, thrownError) {
                                //alert(xhr.responseText);
                            //}
                        //});
                    }
                },
            schema: {
                model: {
                    fields: {
                        "Name": { type: "string" },
                        "UserName": { type: "string" },
                        "CreatedDate": { 
                            type: "date", 
                            parse: function(value) { 
                                return kendo.parseDate(value, "yyyy-MM-ddTHH:mm:ss");
                            }
                        }
                    }
                }
            }
        })
    });

kendo.bind($("#grid"), viewModel);

viewModel.get("reportSource").read();