or
speakerData = new kendo.data.DataSource( { type: "odata", transport: { read: { // the remote service url dataType: "jsonp", data: { Accept: "application/json" } } }, serverfiltering: true, serverPaging: true, pageSize: 10, batch: false });$("#speakersView").kendoMobileListView( { template: "<strong>${Title }</strong>", dataSource: speakerData });localStorage.setItem('speakerData', JSON.stringify(speakerData.data()));var ospeakerData = localStorage.getItem('speakerData'); speakerData1 = JSON.parse(ospeakerData); speakerData = new kendo.data.DataSource( { transport: { read: function (options) { var data = speakerData1 options.success(data); } } });<!DOCTYPE html><html><head> <title></title> <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script></head><body> <div data-role="splitview"> <div data-role="pane" data-layout="side-default" data-transition="slide"> <div data-role="layout" data-id="side-default" data-show="toggleBackButton"> <div data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </div> </div> <div data-role="view" data-title="Empty Pane"> Empty Pane </div> </div> <div data-role="pane" data-layout="main-default" id="main-pane"> <div data-role="view" data-title="Categories" id="side-root"> <ul data-role="listview" data-style="inset" data-source="splitViewCategories" data-template="categoriesTemplate"> </ul> </div> <script id="categoriesTemplate" type="text/x-kendo-template"> <a href="\#side-inbox?CategoryID=#: CategoryID#" data-target="main-pane">#: CategoryName #</a> </script> <script id="productsTemplate" type="text/x-kendo-template"> <a href="\#orders?ProductID=#: ProductID #" data-target="main-pane"> <span class="date">$#: UnitPrice#</span> <h3>#: ProductName #</h3> <span class="excerpt">#: QuantityPerUnit #</span> </a> </script> <div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts"> <ul data-role="listview" data-auto-bind="false" data-source="splitViewProducts" data-template="productsTemplate"> </ul> </div> <script type="text/x-kendo-template" id="ordersTemplate"> <dl> <dt>Discount</dt> <dd>#: Discount #</dd> <dt>Quantity</dt> <dd>#: Quantity #</dd> <dt>UnitPrice</dt> <dd>#: UnitPrice #</dd> </dl> </script> <div data-role="view" data-title="Orders" id="orders" data-show="displayOrder"> <div id="product-details"> </div> </div> <div data-role="layout" data-id="main-default"> <div data-role="header"> <div data-role="navbar"> <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a> <span data-role="view-title"></span> <a data-role="button" href="#index" data-align="right" data-target="_top">Index</a> </div> </div> </div> </div></div><script> var categoryID = null; var splitViewCategories = new kendo.data.DataSource({ type: "odata", transport: { } }); var splitViewProducts = new kendo.data.DataSource({ type: "odata", serverFiltering: true, transport: { read: { } } }); var splitViewOrderDetails = new kendo.data.DataSource({ type: "odata", serverFiltering: true, transport: { read: { url: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order" } }, change: function () { var template = kendo.template($("#ordersTemplate").text()); $("#product-details").html(kendo.render(template, this.data())); } }); function displayOrder(e) { splitViewOrderDetails.filter({ field: "ProductID", operator: "eq", value: parseInt(e.view.params.ProductID) }); splitViewOrderDetails.read(); } function filterProducts(e) { splitViewProducts.filter({ field: "CategoryID", operator: "eq", value: parseInt(e.view.params.CategoryID) }); splitViewProducts.read(); } function toggleBackButton(e) { if (e.view.id === "#side-inbox") { e.view.element.find("[data-role=backbutton]").css("visibility", ""); } else { e.view.element.find("[data-role=backbutton]").css("visibility", "visible"); } }</script><style scoped> #side-inbox .date { float: right; color: rgba(200,200,200,.8); font-size: .7em; font-weight: normal; } #side-inbox .excerpt { clear: both; font-size: .7em; font-weight: normal; } #side-inbox .km-content h3 { margin-left: 0; } #main-pane .km-content{ padding: 30px; } #main-pane dl { float: left; margin: 0; padding: 0 0 20px 0; } #main-pane dl:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #main-pane dt, #main-pane dd { display: block; float: left; margin: 0; padding: 0; } #main-pane dt { clear: left; text-align: right; padding: 0 10px; }</style><script> var app = new kendo.mobile.Application(document.body);</script></body></html>