Kendo UI: Update one columns data on changing valu

Question

Scenario I am having a grid of product details which on Edit opens up a pop-up comprising of that record details. All fields are readonly except the quantity field. Hence, when I increase or decrease the quantity the price column should reflected based on the value. So if quantity of 1 is 10 then when I increase the quantity to 2 it should be reflected to 20.

Questions 1) I've studied the editor method a bit, I'll have to use the same method on the quantity column right??

2) How shall I grab the value of the price column and update its value? are there any built in methods like the editor?? How shall I go about??

Following is the JS fiddle which I have prepared. http://jsbin.com/ugeref/3/edit

Thanks!!

- Hardik

Answer 1

Define your DataSource as:

var dataSource = new kendo.data.DataSource({
    data  : data,
    schema: {
        model: {
            id    : "Id",
            fields: {
                productName: { editable: false},
                quantity   : { editable: true, type : "number" },
                price      : { editable: false, type : "number" },
                total      : { editable: false, type : "number" }
            }
        }
    }
});

Where you should add a total field that is quantity times price. NOTE: In addition, I've defined the type of the different fields to let KendoUI know that are number and generate the correct widgets.

Then, define the grid as:

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable  : true,
    height    : 400,
    toolbar   : ["create"],
    columns   : [
        { field: "productName", title: "Product Name" },
        { field: "quantity", title: "Quantity", format: "{0:c}"},
        { field: "total", title: "Total", template: "#= quantity * price #", width: "150px" },
        { command: ["edit", "destroy"], title: " " }
    ],
    editable  : "popup"
});

Where I added a Total column that uses a template that is the result of quantity * price.

Each time that you update quantity, total will get updated.

See you code modified in here