Demo #2: Templating and Data binding

by zoldello

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
   <div id="example" class="k-content">
       <h1> Some songs Michael Jackson Covered</h1>
       <br />
            <div class="demo-section">
                <table id="movies" class="metrotable">
                    <thead>
                        <tr>
                             <th>Title</th> 
                            <th> Original Artist </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

            </div>

            <script id="template" type="text/x-kendo-template">
                <tr>
                    <td>#= title #</td>
                    <td>#= originalArtist #</td>
               
                </tr>
            </script>

CSS

h1 
{
                    font-size: 1.3em;
                    padding-top: 0;
                    padding-bottom: 5px; 
}

.demo-section {
                    width: 600px;    
                }
               

                .metrotable {
                    width: 100%;
                    border-collapse: collapse;
                }
                
                .metrotable > thead > tr > th 
                {
                    font-size: 1.3em;
                    padding-top: 0;
                    padding-bottom: 5px;
                }

JavaScript

$(document).ready(function() {
                    // create a template using the above definition
                    var template = kendo.template($("#template").html());

                    var movies = [
                        { "title": "Behind the Mask",  "originalArtist": "Yellow Magic Orchestra "},
                        { "title": "Come Together",  "originalArtist": "Beatles" },
                        { "title": "Girlfriend",  "originalArtist": "Wings"},
                        { "title": "Smile",  "originalArtist": "Charlie Chaplin" },
                        { "title": "Rockin' Robin",  "originalArtist": "Bobby Day" }
                    ];

                    var dataSource = new kendo.data.DataSource({
                        data: movies,
                        change: function() { // subscribe to the CHANGE event of the data source
                            $("#movies tbody").html(kendo.render(template, this.view())); // populate the table
                        }
                    });

                    // read data from the "movies" array
                    dataSource.read();
                });