Kendo UI datasource example

by David McClelland

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<input type=button value = "How Many Games?" onclick="getTotalGames();"/>

CSS

#panel {
        background-image: none;
        margin: -16px 0 30px;
        padding: 30px 0 25px;
    }
    #panel input, #panel textarea {
        font: inherit;
        margin: -5px 0 5px;
    }
    #exampleWrap ul h3 {
        margin-bottom: 0.6em;
        padding: 0;
    }
    #exampleWrap ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #example ul label {
        display: inline-block;
        vertical-align: top;
        width: 110px;
        padding: 0 8px;
        text-align: right;
    }
    #preview {
        margin-left: 129px;
    }
    #preview {
        height: 26px;
        width: 140px;
    }
    #example li {
        margin: 0.4em 0;
    }
    #example h3.k-header {
        margin: 1.4em 0 1em;
        padding: .4em 1.4em;
        font-size: 1.4em;
        border-radius: 2px;
    }
    #blog-content {
        height: 100px;
    }
    #blog-preview {
        width: 84%;
        margin: 0 auto 40px;
    }
    #blog-preview img {
        float: left;
        margin: 0 14px 0 0;
        border: 3px solid #dedede;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }
    #blog-preview h4 {
        font-size: 10px;
        font-weight: normal;
        text-transform: uppercase;
        color: #8d8d8d;
        margin-top: 0;
        border-bottom: 1px solid #dedede;
    }
    #blog-preview h4 strong {
        color: #ed662e;
    }
    #blog-preview p, #blog-preview h4 {
        margin-left: 93px;
    }

JavaScript

var videoGames = [{
        name: "Need for Speed: Underground",
        year: 2004,
        copiesSold: "1.10 million"
    }, {
        name: "Halo: Combat Evolved",
        year: 2001,
        copiesSold: "5 million"
    }, {
        name: "Grand Theft Auto Double Pack",
        year: 2003,
        copiesSold: "1.70 million"
    }];
    var videoGamesDS = new kendo.data.DataSource({
        data: videoGames
    });


function getTotalGames(){
    videoGamesDS.read();
    alert(videoGamesDS.total());
}