MVVM editing
HTML
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<div id="MainWindow">
<div >Main Window</span></div>
<span data-bind="text: ProductName"></span>
<button data-bind="click: ShowUpdateWindow">Update Window</button>
</div>
<div id="UpdateWindow">
<div>Update Window</span></div>
<input data-bind="value: ProductId" />
<button data-bind="click: CancelUpdateWindow">Back</button>
<button data-bind="click: UpdateId">Update Id</button>
</div>
JavaScript
dataSource = new kendo.data.DataSource({
schema: {
model: { id: "Id" }
},
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products"
},
update: {
url: "http://demos.kendoui.com/service/Products/Update",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
change: function () {
viewModel.data = dataSource.view()[0];
kendo.bind($("#MainWindow, #UpdateWindow"), viewModel);
}
});
var viewModel = new kendo.data.ObservableObject({
data: [],
ProductName: function () { return this.get("data.ProductName"); },
ProductId: function () { return this.get("data.ProductID"); },
ShowUpdateWindow: function () {
alert("Showing update window");
$("#MainWindow").slideUp(300);
$("#UpdateWindow").slideDown(300);
},
CancelUpdateWindow: function () {
alert("Showing cancel window");
$("#UpdateWindow").slideUp(300);
$("#MainWindow").slideDown(300);
},
UpdateId: function () {
alert("Updating");
dataSource.sync();
}
});
$("#UpdateWindow").hide();
dataSource.read();