or
<!DOCTYPE html><html><head> <style> html { font-size: 9px; font-family: 'Segoe UI'; } </style> <title>Grid With CheckBox</title> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" /> <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script></head><body> <div data-role="view" id="tabstrip-ticker" data-title="Grid With Checkbox" data-layout="mobile-tabstrip"> <ul data-role="listview" data-style="inset" data-type="group"> <li> Test Grid With CheckBox <ul> <li> <div id="revgrid" style="width: 100%; margin-left: auto; margin-right: auto; font-size: 9px; float: left;"></div> </li> </ul> </li> </ul></div> <div data-role="layout" data-id="mobile-tabstrip"> <header data-role="header"> <div data-role="navbar"> <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>--> <span data-role="view-title"></span> <a data-align="right" data-role="button" class="nav-button" href="#/">Home</a> </div> </header> <p>TabStrip</p> <div data-role="footer"> <div data-role="tabstrip"> <a href="#tabstrip-ticker" data-icon="info">Home</a> </div> </div> </div> <style scoped> #tabstrip-profile h2 { display: inline-block; font-size: 1.1em; margin: 1.5em 0 0 .7em; } #tabstrip-profile h2 span { display: block; clear: both; font-size: 1.8em; margin: .1em 0 0 0; } #tabstrip-profile img { width: 5em; height: 5em; float: left; margin: 1em; border: 1px solid rgba(0,0,0,.2); -webkit-border-radius: 4em; border-radius: 4em; } .sales-down, .sales-hold, .sales-up, .value { float: right; } .sales-up { color: green; } .sales-down { color: red; } .sales-hold { color: blue; } .value { color: #bbb; } </style> <script> $(document).ready(function () { var RevSource = [ { "BookYear": "JPLN/15", "RevHandled": "$1500.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1600.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1700.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1800.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1500.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1600.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1700.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1800.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1500.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1600.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1700.00", "RepCode": "TJN" }, { "BookYear": "JPLN/15", "RevHandled": "$1800.00", "RepCode": "TJN" } ]; $("#revgrid").kendoGrid({ dataSource: RevSource, selectable: "multiple row", columns: [ { field: "BookYear", title: "Book/Year" }, { field: "RevHandled", title: "Rev Handled", format: "{0:c}" }, { field: "RepCode", title: "Rep Code" }, { field: "Select", title: "Select", headerTemplate: '<input type="checkbox" id="check-all" /><label for="check-all">Select</label>', template: '<input type="checkbox" id="selectbox" />' } ] }); }); </script> <script> var app = new kendo.mobile.Application(document.body, { transition: 'slide' }); localStorage.clear(); function showLoading() { app.showLoading(); setTimeout(function () { app.changeLoadingMessage("Please wait..."); }, 1000); } $(function () { app.skin("flat"); }); </script></body></html>