View source code:
<div id="form-container">
<div class="demo-section">
<h4>Select Product</h4>
<select data-role="dropdownlist" data-option-label="Select product"
data-value-field="ProductID" data-text-field="ProductName"
data-bind="source: productsSource, value: selectedProduct" style="width: 100%;"></select>
<button data-bind="click: save, enabled: hasChanges" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md">Submit All Changes</button>
</div>
<div class="demo-section product-info" data-bind="visible: showForm">
<ul>
<li><h4>ID: <span data-bind="text:selectedProduct.ProductID, events: { change: change }"></span></h4></li>
<li><h4>Name</h4>
<span class="k-textbox k-input k-input-md k-rounded-md k-input-solid" style="width: 100%;" >
<input id="products" data-bind="value: selectedProduct.ProductName, events: { change: change }" class="k-input-inner" />
</span>
</li>
<li><h4>UnitPrice</h4> <input type="text" data-role="numerictextbox" data-bind="value: selectedProduct.UnitPrice, events: { change: change }" style="width: 100%;" /></li>
</ul>
<button data-bind="click: remove" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md">Delete Product</button>
</div>
</div>
View model source code:
var viewModel = kendo.observable({
productsSource: new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
return options;
}
},
batch: true,
schema: {
model: {
id: "ProductID"
}
}
}),
selectedProduct: null,
hasChanges: false,
save: function() {
this.productsSource.sync();
this.set("hasChanges", false);
},
remove: function() {
if (confirm("Are you sure you want to delete this product?")) {
this.productsSource.remove(this.selectedProduct);
this.set("selectedProduct", this.productsSource.view()[0]);
this.change();
}
},
showForm: function() {
return this.get("selectedProduct") !== null;
},
change: function() {
this.set("hasChanges", true);
}
});
kendo.bind($("#form-container"), viewModel);