or
<script type="text/x-kendo-template" id="packagesTemplate"> <h3 class="item-title">${Name}</h3> <p class="item-info">Status: ${Status}</p> <select data-role="comboBox" id="select#:id#" > <option value="Pending">Pending</option> <option value="Delivered">Delivered</option> <option value="Damaged">Damaged</option> <option value="Refused">Refused</option> </select> <a data-role="button" data-item-id="#:id#" data-click="saveChanges" class="details-link">Save Changes</a>function saveChanges(e) { var button = e.button, item = packageDataSource.get(button.data("itemId")); console.log(item); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Deliveries</title> <script src="js/jquery.min.js"></script> <script src="js/kendo.mobile.min.js"></script> <script src="js/console.js"></script> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" /></head><body> <a href="Index.html">Back</a> <div data-role="view" id="listview-customers" data-init="showCustomerList" data-title="Customers"> <ul id="customer-listview"> </ul> </div> <div data-role="view" id="listview-packages" data-title="Packages"> <ul id="package-listview"> </ul> </div> <div data-role="layout" data-id="databinding"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> <a data-align="right" data-role="button" class="nav-button" href="Index.html">Home</a> </div> </header> </div> <script> var id; var packages; var packageDataSource = new kendo.data.DataSource({ schema: { model: { id: "ID", fields: { Name: { type: "string" }, Status: { type: "string" } } } } }); var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:8080/databases/shipping/docs", dataType: "json", data: { q: "javascript" } } }, schema: { model: { id: "id", fields: { Name: { type: "string" }, Telephone: { type: "string" }, Address: { type: "string" }, Suburb: { type: "string" }, City: { type: "string" }, Province: { type: "string" }, Country: { type: "string" }, PostalCode: { type: "string" }, DeliveryStatus: { type: "string" }, Packages: { type: "auto" } } } } }); function showCustomerList() { { $("#listview-customers").kendoMobileListView({ dataSource: dataSource, template: kendo.template($("#customersTemplate").html()), selectable: true, click: function (e) { packages = e.dataItem.Packages; showPackageList(); //showButton(); } }); } } function showPackageList() { for (var a = 0; a < packages.length; a++) { packageDataSource.add({ ID: packages[a].ID, Name: packages[a].Name, Status: packages[a].Status }); } $("#listview-customers").kendoMobileListView({ dataSource: packageDataSource, template: kendo.template($("#packagesTemplate").html()) }); } function saveChanges(e) { var button = e.button, item = packageDataSource.get(button.data("itemId")); console.log(item); } </script> <script type="text/x-kendo-template" id="customersTemplate"> <h3 class="item-title">${Name}</h3> <p class="item-info">Status: ${DeliveryStatus}</p> </script> <script type="text/x-kendo-template" id="packagesTemplate"> <h3 class="item-title">${Name}</h3> <p class="item-info">Status: ${Status}</p> <select data-role="combobox"> <option value="Pending">Pending</option> <option value="Delivered">Delivered</option> <option value="Damaged">Damaged</option> <option value="Refused">Refused</option> </select> <a data-role="button" data-item-id="#:id#" data-click="saveChanges" class="details-link">Save Changes</a> </script></body></html>