Kendo UI Grid

Local data, mobile scrolling.

by roeburg

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>
<div id="example" class="k-content">
    <table id="grid">
        <colgroup>
            <col class="photo" />
            <col class="details" />
            <col/>
        </colgroup>
        <thead>
            <tr>
                <th>Picture</th>
                <th>Details</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3"></td>
            </tr>
        </tbody>
    </table>
    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr > <td class = "photo" > <img src = "../../content/web/Employees/#:data.EmployeeID#.jpg"
        alt = "#: data.EmployeeID #" /> </td>
		            <td class="details">
			           <span class="title">#: Title #</span > <span class = "description" > Name: #: FirstName##: LastName# </span>
			           <span class="description">Country : #: Country# </span > </td>
		            <td class="employeeID">
		               #: EmployeeID #
		            </td > </tr>
    </script>
    <script id="altRowTemplate" type="text/x-kendo-tmpl">
        <tr class = "k-alt" > <td class = "photo" > <img src = "../../content/web/Employees/#:data.EmployeeID#.jpg"
        alt = "#: data.EmployeeID #" /> </td>
		            <td class="details">
			           <span class="title">#: Title #</span > <span class = "description" > Name: #: FirstName##: LastName# </span>
			           <span class="description">Country : #: Country# </span > </td>
		            <td class="employeeID">
		               #: EmployeeID #
		            </td > </tr>
    </script>
</div>

CSS

.photo {
    width: 140px;
}
.details {
    width: 400px;
}
.title {
    display: block;
    font-size: 1.6em;
}
.description {
    display: block;
    padding-top: 1.6em;
}
.employeeID {
    font-family:"Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: #898989;
}
td.photo, .employeeID {
    text-align: center;
}
.k-grid-header .k-header {
    padding: 10px 20px;
}
.k-grid td {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.05)), color-stop(100%, rgba(0, 0, 0, 0.15)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 100%);
    padding: 20px;
}
.k-grid .k-alt td {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%);
}

JavaScript

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
                }
            }
        },
        rowTemplate: kendo.template($("#rowTemplate").html()),
        altRowTemplate: kendo.template($("#altRowTemplate").html()),
        height: 430
    });
});