kendo grid - Init from table

Sample from web/grid/fromtable http://demos.kendoui.com/web/grid/from-table.html

by jwstott

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="example" class="k-content">
            <table id="grid">
                <thead>
                    <tr>
                        <th data-field="rank">Rank</th>
                        <th data-field="rating">Rating</th>
                        <th data-field="title">Title</th>
                        <th data-field="year">Year</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
    
    <div id='grid2' >
    </div>
</div>

<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
    <td>#=rank#</td>
    <td>#:rating#</td>
    <td>${title}</td>
    <td><span data-bind"text: year"/></td>
</tr>
                    
</script>

JavaScript

var viewModel = kendo.observable({
    data: [{
        rank: 1,
        rating: 9.2,
        title: 'The Shawshank Redemption',
        year: 1994},
    {
        rank: 2,
        rating: 9.2,
        title: 'The Godfather',
        year: 1972},
    {
        rank: 3,
        rating: 9,
        title: 'The Godfather: Part II',
        year: 1974}]
});
var ds = new kendo.data.DataSource({
    pageSize: 10,
    data: [{
        rank: 1,
        rating: 9.2,
        title: 'The Shawshank Redemption',
        year: 1994},
    {
        rank: 2,
        rating: 9.2,
        title: 'The Godfather',
        year: 1972},
    {
        rank: 3,
        rating: 9,
        title: 'The Godfather: Part II',
        year: 1974}]

});

// read the data
ds.read();
kendo.bind($('#example'), viewModel);
$("#grid").kendoGrid({
    height: 250,
    pageable: true,
    rowTemplate: kendo.template($("#rowTemplate").html()),
    dataSource: ds
});
/*

dataSource: {
        data: viewModel.data,
        pageSize: 2
    }
*/
$('#grid2').kendoGrid({
    columns: [
        {
        field: "rank",
        title: "Rank"},
    {
        field: "rating",
        title: "Rating"},
    {
        field: "title",
        title: "Title"},
    {
        field: "year",
        title: "Year"}],
    dataSource: ds,
    rowTemplate: kendo.template($("#rowTemplate").html())
});