kendoui schema example

by delebash

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<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">
	<div id="grid" style="width: 700px; margin: 0 auto;"></div>

JavaScript

var data =[ 
    {
        "CompanyId": 20,
        "CompanyName": "Walmart",
        "CompanyContacts": [
            {
                "CompanyId": 20,
                "FirstName": "Bob",
                "LastName": "Green",
                "Email": "[email protected]",
                "Phone": "1234567",
                "IsActive": false
            }
        ]
    }]

   
var mySchema = kendo.data.Model.define({
                id : "CompanyId",
                fields : {
                    CompanyId : {
                        type : "number"
                    },
                    CompanyName : {
                        type : "string"
                    },
                    CompanyContacts : {}
                }
            });

      $(document).ready(function () {
           $("#grid").kendoGrid({
       dataSource: {
                            data: data,
                            schema: {
                                model : mySchema 
                            },
                            pageSize: 10
                        },
                        height: 250,
                        scrollable: true,
                        sortable: true,
                        filterable: true,
                        pageable: {
                            input: true,
                            numeric: false
                        },
                        columns: [
                            {field: "CompanyId"},
                            {field: "CompanyName"},
                            {field: "CompanyContacts.FirstName"},
                             {field: "CompanyContacts.LastName"},
                            {field: "CompanyContacts.Email"},
                            {field: "CompanyContacts.Phone"},
                            {field: "CompanyContacts.IsActive"}        
                        ]
                    });
      });