Kendo UI JumpStart - Grid and Templates

by manoj

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="main">
    <div class="row">
        <div class="col-xs-5 col-xs-offset-1">
            <h4>Templates</h4>
            <div data-role="listview" data-bind="source: dataSource" data-template="movie-template"></div>
            <script type="x-kendo-template" id="movie-template">
                <div>
                    <h4>#=title#</h4>
                    # if(year > 2009) {#
                    <div data-bind="text: year"></div> 
                    #}# 
                </div>
            </script>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-8 col-xs-offset-1">
            <h4>Grid</h4>
            <div id="grid"></div>
        </div>
    </div>
</div>

CSS

div.row {
    margin-top: 20px;
}

JavaScript

$(function () {
    // Observable ViewModel
    var viewModel = kendo.observable({
        dataSource: new kendo.data.DataSource({
            data: [{
                id: 1,
                title: '12 Years a Slave',
                year: 2013,
                director: 'Steve McQueen'
            }, {
                id: 2,
                title: 'Argo',
                year: 2012,
                director: 'Ben Affleck'
            }, {
                id: 3,
                title: 'The Artist',
                year: 2011,
                director: 'Michel Hazanavicius'
            }, {
                id: 4,
                title: 'The King\'s Speech',
                year: 2010,
                director: 'Tom Hooper'
            }, {
                id: 5,
                title: 'The Hurt Locker',
                year: 2009,
                director: 'Kathryn Bigelow'
            }, {
                id: 6,
                title: 'Slumdog Millionaire',
                year: 2008,
                director: 'Danny Boyle'
            }, {
                id: 7,
                title: 'No Country for Old Men',
                year: 2007,
                director: 'Joel and Ethan Coen'
            }, ],pageSize: 10,
            schema: {
                model: {
                    id: 'id',
                    fields: {
                        title: {
                            type: 'string'
                        },
                        year: {
                            type: 'number'
                        },
                        director: {
                            type: 'string'
                        }
                    }
                }
            }
        })
    });

    // Grid
    $('#grid').kendoGrid({
        dataSource:viewModel.dataSource, 
        sortable: true,
        filterable: true,
        columnMenu: true,
        pageable: true

    });

    kendo.bind($('#main'), viewModel);
});