Grid with Complex JSON

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<button id="show" class="k-button">Show</button>
<div id="grid"></div>
<pre id="dump"></pre>

CSS

#grid {
    width : 490px;
}

JavaScript

data = [ 
    {
        "id":1,
        "user_role":"ADMIN",
        "state":"ACTIVE",
        "address":{
            "street":"test 59",
            "city":"City test",
            "post_number":"25050"
        }
    },
    {
        "id":2,
        "user_role":"ADMIN",
        "state":"ACTIVE",
        "address":{
            "street":"test 59",
            "city":"City test",
            "post_number":"25050"
        }
    }
];

var grid = $("#grid").kendoGrid({
    dataSource: data,
    editable: true,
    columns   : [
        { field: "id", title: "#" },
        { field: "user_role", title: "Role" },
        { field: "address.street", title: "Street" },
        { field: "address.city", title: "City" },
        { field: "address.post_number", title: "Post#" }
    ]
}).data("kendoGrid");

$("#show").on("click", function() {
    $("#dump").html(JSON.stringify(grid.dataSource.data(), null, 4));
});