Hello,
Is it possible to to change the value(recalculate) the cell of the "Total" column in the grid while the user types in a "Quantity"(input)? This is a shopping list grid, there is a "Price" (bound column) and I need to calculate the Total dynamically based on the Quantity that the user will input. Maybe I'm doing it wrong, can you please point me to the right direction? Thanks,
Is it possible to to change the value(recalculate) the cell of the "Total" column in the grid while the user types in a "Quantity"(input)? This is a shopping list grid, there is a "Price" (bound column) and I need to calculate the Total dynamically based on the Quantity that the user will input. Maybe I'm doing it wrong, can you please point me to the right direction? Thanks,
var gridResult = $("#grid").kendoGrid({
dataSource: {
type: "aspnetmvc-ajax",
// type: "json",
transport: {
read: "Home/Products_Read"
},
schema: {
data: "data",
total: "total",
model: {
id: "products",
fields: {
Code: { editable: false },
Number: { editable: false },
Name: { editable: false },
Supplier: { editable: false },
Price: { editable: false, type: "number" },
Quantity: { editable: true, type: "number" },
Total: { editable: true, type: "number" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
selectable: "row",
sortable: true,
pageable: true,
columns: [
{ field: "Number", title: "Number", width: "100px" },
{ field: "Name", title: "Name" },
{ field: "Supplier", title: "Supplier", width: "100px" },
{ field: "Price", title: "Price", width: "100px", format: "{0:n}" },
{ field: "Quantity", title: "Quantity", width: "100px", template: '<
input
data-role
=
"numerictextbox"
data-bind
=
"value: Quantity"
data-max-value
=
"100"
class
=
"quantityTextArea"
/>' },
{ field: "Total", title: "Total", width: "100px", template: "#= Price #" }
],
rowTemplate:
'<
tr
data-uid
=
"#= Code #"
>' +
'<
td
><
span
>${Number}</
span
></
td
>' +
'<
td
><
span
>${Name}</
span
></
td
>' +
'<
td
><
span
>${Supplier}</
span
></
td
>' +
'<
td
><
span
>${Price}</
span
></
td
>' +
'<
td
><
input
data-role
=
"numerictextbox"
data-bind
=
"value: Quantity"
data-max-value
=
"100"
class
=
"quantityTextArea"
/></
td
>' +
'<
td
>#=Price*Quantity#</
td
>' +
'</
tr
>'
});