View source code:
<div id="example">
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Units</th>
<th>Delete</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: products"></tbody>
<tfoot data-template="footer-template" data-bind="source: this"></tfoot>
</table>
<div>
<span>Add a product</span>
<ul>
<li>
<label>Name:
<span class="k-textbox k-input k-input-md k-rounded-md k-input-solid" style="width: 100%;" >
<input type="text" placeholder="Enter name" data-bind="value: productName" class="k-input-inner" />
</span>
</label>
</li>
<li>
<label>Price:
<span class="k-textbox k-input k-input-md k-rounded-md k-input-solid" style="width: 100%;" >
<input type="number" placeholder="Enter number" data-bind="value: productPrice" class="k-input-inner" />
</span>
</label>
</li>
<li>
<label>Units in stock:
<span class="k-textbox k-input k-input-md k-rounded-md k-input-solid" style="width: 100%;" >
<input type="number" placeholder="Enter number" data-bind="value: productUnitsInStock" class="k-input-inner" />
</span>
</label>
</li>
<li>
<button data-bind="click: addProduct">Add a new product</button>
</li>
</ul>
</div>
</div>
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name">
</td>
<td data-bind="text: price" data-format="C">
#: kendo.toString(get("price"), "C") #
</td>
<td data-bind="text: unitsInStock"></td>
<td><button data-bind="click: deleteProduct">Delete</button></td>
</tr>
</script>
<script id="footer-template" type="text/x-kendo-template">
<tr>
<td>
Products count: #: total() #
</td>
<td>
Total price: #: totalPrice() #
</td>
<td colspan="2">
Units in stock: #: totalUnitsInStock() #
</td>
</tr>
</script>
View model source code:
var viewModel = kendo.observable({
productName: "Product name",
productPrice: 10,
productUnitsInStock: 10,
addProduct: function() {
this.get("products").push({
name: this.get("productName"),
price: parseFloat(this.get("productPrice")),
unitsInStock: parseFloat(this.get("productUnitsInStock"))
});
},
deleteProduct: function(e) {
// the current data item (product) is passed as the "data" field of the event argument
var product = e.data;
var products = this.get("products");
var index = products.indexOf(product);
// remove the product by using the splice method
products.splice(index, 1);
},
total: function() {
return this.get("products").length;
},
totalPrice: function() {
var sum = 0;
$.each(this.get("products"), function(index, product) {
sum += product.price;
});
return sum;
},
totalUnitsInStock: function() {
var sum = 0;
$.each(this.get("products"), function(index, product) {
sum += product.unitsInStock;
});
return sum;
},
products: [
{ name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
{ name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
{ name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
{ name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
]
});
kendo.bind($("#example"), viewModel);