Update Calculated Cell Value on the Fly
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Description
How can I update the value of the calculated field as the users make changes?
Solution
- Handle the
edit
event of the Grid. In the event handler, get a reference to the editors for the respective fields. - In the
change
event of the editors, get the new value and use it to calculate the result.
<div id="grid"></div>
<script>
$(document).ready(function () {
sampleData = [
{ id: 1,
ProductName: "Diesel",
grossSellUnitPrice: 100,
quantity: 2,
grossSellAmount: 200
},
{ id: 2,
ProductName: "Ad Blue",
grossSellUnitPrice: 200,
quantity: 2,
grossSellAmount: 400
},
{ id: 3,
ProductName: "Bio Diesel",
grossSellUnitPrice: 300,
quantity: 1,
grossSellAmount: 300
}
],
dataSource = new kendo.data.DataSource({
data: sampleData,
schema: {
model: {
id: "Productid",
fields: {
Productid: { type: "number"},
ProductName: { validation: { required: true } },
grossSellUnitPrice: { type: "number", validation: { required: true, min: 1}},
quantity: {type: "number", validation: {required: true}},
grossSellAmount: {type: "number", editable:"false"}
}
}
},
pageSize: 10
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
save: function(data) {
if (data.model.grossSellUnitPrice && data.model.quantity) {
data.model.set("grossSellAmount", data.model.grossSellUnitPrice * data.model.quantity);
}
},
edit: function(e) {
if (!e.model.isNew()) {
var priceEditor = e.container.find("input[name=grossSellUnitPrice]").data("kendoNumericTextBox");
var quantityEditor = e.container.find("input[name=quantity]").data("kendoNumericTextBox");
priceEditor.bind("change", function(e) {
var price = this.value();
var quantity = quantityEditor.value();
var totalSpan = this.element.closest("tr").find(".totalSpan");
totalSpan.html(price * quantity);
});
quantityEditor.bind("change", function(e) {
var price = priceEditor.value();
var quantity = this.value();
var totalSpan = this.element.closest("tr").find(".totalSpan");
totalSpan.html(price * quantity);
});
}
},
toolbar: ["create"],
columns: [
"ProductName",
{ field: "grossSellUnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "quantity"},
{ field: "grossSellAmount",
editor: function(cont, options) {
$("<span class='totalSpan'>" + options.model.grossSellAmount + " €</span>").appendTo(cont);
}
},
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
</script>