Kendo UI Grid

Local data, mobile scrolling.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://dl.dropbox.com/u/7951544/minitip.min.js"></script>
<div class="grid">
    <h3>Current<span class="goal-count">15</span></h3>
</div>

CSS

body {
    color: #555;
    font-family: 'helvetica neue', arial, sans-serif;
}

.grid {
    border-color: #bbb;
    font-size: 13px;
    max-width: 850px;
    margin: 50px;
    
    -moz-box-shadow: 0px 1px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px rgba(0, 0, 0, 0.05);
}

.grid h3 {
    background-color: #8BC437;
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(100%, rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    border: 1px solid rgba(106, 151, 38, 1);
    color: #fff;
    font-weight: bold;
    margin: -1px -1px 0;
    padding: 10px 15px;
    text-shadow: 0 1px rgba(0, 0, 0, 0.15);
}

.grid .goal-count {
    background-color: #6a9726;
    font-size: 11px;
    padding: 1px 7px;
    margin-left: 10px;
    
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

.grid td {
    border-color: #eaeaea;
}

.k-grid-header {
    border: 1px solid #bbb;   
}

.k-grid-header,
.k-grid-pager {
    background-color: #eee;
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(100%, rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255,...

JavaScript

(function ($) {
    var MyGrid = kendo.ui.Grid.extend({
        init: function (element, options) {
            kendo.ui.Grid.fn.init.call(this, element, options);
        },
        options: {
            name: "BasicExtendedGrid",
            autobind: true,
            templet: null
        },
    });
    kendo.ui.plugin(MyGrid);
})(jQuery);


var source = ["O", "P", "P2P", "R", "P2P"],
    title = ["Walk or Waddle", "Run Run Run", "Visit the Doc", "Hike the Trails", "Kayak the Sound"],
    units = [1023, 12, "–", 2, 20],
    days = [10, 4, "–", 1, 3],
    reward = ["$10 gift card", "100 points", "100 points", "50 points", "100 points"],
    device = ["–", "Yes", "–", "–", "–"],
    dates = [new Date("1948/12/08"), new Date("2012/02/19"), new Date("2012/08/30"), new Date("2012/09/19"), new Date("2012/03/04")],
    times = [new Date("12:03"), new Date("12:04"), new Date("13:22"), new Date("15:22"), new Date("15:55")],
    status = ["✕", "✓", "✓", "✓", "✓"];

function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        
        var x = Math.floor(Math.random() * 5);
        
        data.push({
            Id: i + 1,
            source: source[x],
            title: title[x],
            units: units[x],
            days: days[x],
            updated: dates[x],
            device: device[x],
            reward: reward[x],
            status: status[x]
        });
    }
    return data;
}


$(document).ready(function() {
    grid = $(".grid").kendoBasicExtendedGrid({
        dataSource: {
            data: createRandomData(15),
            schema: {
                model: {
                    fields: {
                        source: { type: "string" },
                        title: { type: "string" },
                        units: { type: "string" },
                        days: { type: "string" },
                        updated: { type: "date" },
                        device: { type:...