Created
February 1, 2014 02:46
-
-
Save roachhd/8747247 to your computer and use it in GitHub Desktop.
basic app window using kendoUI. this implements the back button on the phone to take the user back through thr steps they just carried out.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div id="root" class="container"></div> | |
| <script type="text/x-kendo-template" id="layout-template"> | |
| <ul data-role="menu"> | |
| <li> | |
| <a href="#">Home</a> | |
| </li> | |
| <li> | |
| <a href="#/orders">Orders</a> | |
| </li> | |
| <li> | |
| <a href="#/products">Products</a> | |
| </li> | |
| </ul> | |
| <div id="content"></div> | |
| </script> | |
| <script type="text/x-kendo-template" id="home-template"> | |
| <h1>Home</h1> | |
| </script> | |
| <script type="text/x-kendo-template" id="orders-template"> | |
| <h1>Orders</h1> | |
| <div id="grid"></div> | |
| </script> | |
| <script type="text/x-kendo-template" id="products-template"> | |
| <h1>Products</h1> | |
| </script> | |
| <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| // declare thee datasource outside of the grid | |
| // so we can control which page of data to show | |
| var dataSource = new kendo.data.DataSource({ | |
| type: 'odata', | |
| transport: { | |
| read: 'http://demos.kendoui.com/service/Northwind.svc/Orders' | |
| }, | |
| pageSize: 20, | |
| serverPaging: true | |
| }); | |
| // layouts and views | |
| var layout = new kendo.Layout('#layout-template'); | |
| var views = { | |
| home: new kendo.View('#home-template'), | |
| orders: new kendo.View('#orders-template', { | |
| init: function() { | |
| // create a grid when the view is initialized | |
| var grid = $('#grid').kendoGrid({ | |
| dataSource: dataSource, | |
| columns: [ | |
| { field:'OrderID', filterable: false }, | |
| "Freight", | |
| { field: "ShipName", title: "Ship Name", width: 260 }, | |
| { field: "ShipCity", title: "Ship City", width: 150 } | |
| ], | |
| pageable: true | |
| }).data('kendoGrid'); | |
| // update the url when the grid page changes | |
| grid.pager.bind('change', function(e) { | |
| router.navigate('/orders/' + e.index); | |
| }); | |
| } | |
| }), | |
| products: new kendo.View('#products-template') | |
| }; | |
| // create the router | |
| var router = new kendo.Router({ | |
| init: function() { | |
| // render the layout first | |
| layout.render('#root'); | |
| } | |
| }); | |
| router.route('/', function() { | |
| layout.showIn("#content", views.home); | |
| }); | |
| router.route('/orders(/:page)', function(page) { | |
| // page is an optional parameter, so set it to 1 | |
| // if it doesn't have a value | |
| page = page || 1; | |
| // if the url and datasource page numbers differ, | |
| // update the datasource page to match the url | |
| if (dataSource.page() != page) { | |
| dataSource.page(page); | |
| } | |
| layout.showIn('#content', views.orders); | |
| }); | |
| router.route('/products', function() { | |
| layout.showIn('#content', views.products); | |
| }); | |
| router.start(); | |
| }()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment