roachhd/App.js

## app.html

<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>

## App.js
(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();

}());

	<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>
	(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();

	}());