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: #F5F5F5;
    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: #F5F5F5;
    font-size: 11px;
    padding: 1px 7px;
    margin-left: 10px;
    
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}

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

.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

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() {
    var grid = $(".grid").kendoGrid({
        dataSource: {
            data: createRandomData(15),
            schema: {
                model: {
                    fields: {
                        source: { type: "string" },
                        title: { type: "string" },
                        units: { type: "string" },
                        days: { type: "string" },
                        updated: { type: "date" },
                        device: { type: "string" },
                        reward: { type: "number" },
                        status: { type: "string" }
                    }
                }
            },
            pageSize: 5
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
            {
                field: "source",
               ...