editor & dataSource

by valchev

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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="example">
    <input type="text" id="firstname" data-bind="value: person.Firstname" />
    <input type="text" id="lastname" data-bind="value: person.Lastname" />
    <br />
    <br />
    <table border="1">
        <thead>
            <tr>
                <th>id</th>
                <th>description</th>
                <th>rank</th>
            </tr>
        </thead>
        <tbody data-template="row-template" data-bind="source: person.Likes"></tbody>
    </table>
</div>

<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: id">
        </td>
        <td data-bind="text: description">
        </td>
        <td data-bind="text: rank"></td>
    </tr>
</script>

JavaScript

var viewModel = kendo.observable({
    person: {
        Firstname: "Jim",
        Lastname: "Smith",
        Birthday: "08/29/1979",
        Likes: [ 
            { id: 1, description: "Baseball", rank: 1 }, 
            {id: 2, description: "music", rank: 3 }, 
            { id: 3, description: "Surfing the web", rank: 2}
        ]
    }       
});
kendo.bind($("#example"), viewModel);