Kendo UI MVVM Sample: Example 04

Example of using the Kendo UI MVVM that demonstrates how to use the ObservableArray to display a list of people in a table.

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>
<table>
<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
</thead>
<tbody id="peopleRows" data-bind="source: people" data-template="personTemplate">
</tbody>   
</table>

<script type="text/x-kendo-template" id="personTemplate">
    <tr>
        <td>#= firstName #</td>
        <td>#= lastName #</td>
    </tr>
</script>

CSS

table, th, td {
    border: 1px solid Gray;
}

th {
    width: 100px;
    background-color: Gray;
    color: White;
}

td {
    padding-left: 4px;
}

JavaScript

var vm = kendo.observable({
    people: [
        {
        firstName: "John",
        lastName: "DeVight"},
    {
        firstName: "Wendy",
        lastName: "Parry"}
    ]
});

kendo.bind($("#peopleRows"), vm);