Kendo Grid - Nested Datasource

by LeeMellinger

HTML

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
<div id="grid"></div>

CSS

<style>html { font-size: 8px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />

TypeScript

data = [ 
    {
        "id":1,
        "user_role":"ADMIN",
        "state":"ACTIVE",
        "address":{
            "street":"test 59",
            "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));
});