This question is locked. New answers and comments are not allowed.
With the following code, I'm able to read data from my read WCF method ("GetListOfProducts") and display the data in one of the #test textbox. When I update the data in one of the #test textboxes then click save, I'm expecting it to call the update WCF ("SetProductName") method. But, when I click save, nothing happens. Can someone help me? Thanks!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/weather.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="layout" data-id="pageLayOut">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#homeView" data-icon="home">Home</a>
<a href="#productsView" data-icon="action">Products</a>
</div>
</div>
</div>
<div data-role="view" id="homeView" data-title="Home" data-layout="pageLayOut">
<h1>Welcome!</h1>
</div>
<div data-role="view" id="productsView" data-title="Products" data-model="viewModel" data-layout="pageLayOut" data-init="bindForm">
<ul id="productsList"
data-bind="source: productsData"
data-endlessscroll="true"
data-template="productsTemplate"
data-role="listview"
data-style="inset"></ul>
<input type="button" value="Save" data-bind="click: save" />
</div>
<script id="productsTemplate" type="text/x-kendo-template">
<input type="text" id="test" data-bind="value: ProductName, events: { change: change }" />
</script>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
</script>
<script>
var viewModel = kendo.observable({
productsData: new kendo.data.DataSource(
{
transport: {
read: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/GetListOfProducts",
data: {
Accept: "application/json"
},
type: "GET"
},
update: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/SetProductName",
type: "PUT"
},
parameterMap: function (data, operation) {
alert(operation);
if (operation !== "read" && data.models) {
for (var i in data.models) {
return kendo.stringify({ ProductID: "ProductID", ProductName: "ProductName", Status: "Status" });
}
}
return data;
},
batch: false,
schema: {
model: {
id: "ProductID",
fields: {
ProductSiteID: { type: "string" },
ProductName: { type: "string" },
Status: { type: "string" }
}
}
}
}
}),
save: function (e) {
this.productsData.sync();
},
change: function () {
alert("change was made");
}
});
function bindForm() {
alert("Bind called");
kendo.bind($("#productsView", viewModel));
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/weather.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div data-role="layout" data-id="pageLayOut">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#homeView" data-icon="home">Home</a>
<a href="#productsView" data-icon="action">Products</a>
</div>
</div>
</div>
<div data-role="view" id="homeView" data-title="Home" data-layout="pageLayOut">
<h1>Welcome!</h1>
</div>
<div data-role="view" id="productsView" data-title="Products" data-model="viewModel" data-layout="pageLayOut" data-init="bindForm">
<ul id="productsList"
data-bind="source: productsData"
data-endlessscroll="true"
data-template="productsTemplate"
data-role="listview"
data-style="inset"></ul>
<input type="button" value="Save" data-bind="click: save" />
</div>
<script id="productsTemplate" type="text/x-kendo-template">
<input type="text" id="test" data-bind="value: ProductName, events: { change: change }" />
</script>
<script>
var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "pageLayOut" });
</script>
<script>
var viewModel = kendo.observable({
productsData: new kendo.data.DataSource(
{
transport: {
read: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/GetListOfProducts",
data: {
Accept: "application/json"
},
type: "GET"
},
update: {
dataType: "json",
url: "http://localhost/productWCF/productService.svc/SetProductName",
type: "PUT"
},
parameterMap: function (data, operation) {
alert(operation);
if (operation !== "read" && data.models) {
for (var i in data.models) {
return kendo.stringify({ ProductID: "ProductID", ProductName: "ProductName", Status: "Status" });
}
}
return data;
},
batch: false,
schema: {
model: {
id: "ProductID",
fields: {
ProductSiteID: { type: "string" },
ProductName: { type: "string" },
Status: { type: "string" }
}
}
}
}
}),
save: function (e) {
this.productsData.sync();
},
change: function () {
alert("change was made");
}
});
function bindForm() {
alert("Bind called");
kendo.bind($("#productsView", viewModel));
}
</script>
</body>
</html>
1 Answer, 1 is accepted
0
Hello Dan,
There is a syntax error in the provided dataSource configuration - schema should part of the dataSource root object, not nested inside the transport.
Please change your configuration in the following way and let me know if the problem still persists.
Regards,
Alexander Valchev
Telerik
There is a syntax error in the provided dataSource configuration - schema should part of the dataSource root object, not nested inside the transport.
Please change your configuration in the following way and let me know if the problem still persists.
productsData: new kendo.data.DataSource({ transport: { read: { dataType: "json", data: { Accept: "application/json" }, type: "GET" }, update: { dataType: "json", type: "PUT" }, parameterMap: function (data, operation) { alert(operation); if (operation !== "read" && data.models) { for (var i in data.models) { return kendo.stringify({ ProductID: "ProductID", ProductName: "ProductName", Status: "Status" }); } } return data; } }, batch: false, schema: { model: { id: "ProductID", fields: { ProductSiteID: { type: "string" }, ProductName: { type: "string" }, Status: { type: "string" } } } }}),Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!