Kendo grid cell editing

Question

I want to manually edit a cell and and based on that entered data, automatically display content on another cell.

For Eg: If quantity is changed, Total should be calculated (price * quantity) and display the result on Total column

Is it possible using Kendo grid? Any help appreciated.

Answer 1

Yes, it is possible. You can find some information on internet if you search for "KendoUI Grid calculated field".

The solution depends on the type of edition mode that you have chosen ("inline", "incell" or "popup"). Since I'm not seeing any column in your grid with a button for triggering the edition, I'll understand that you are editing incell. Then the solution is intercept the save event and compute the field as that.

Let have your DataSource defined as:

var ds = {
    data    : [
        { Id: 1, ItemName: "Galaxy", Price: "25000", Qty: 2, Total: 50000 },
        { Id: 1, ItemName: "Lumia", Price: "18000", Qty: 1, Total: 18000 },
        { Id: 1, ItemName: "Experia", Price: "10000", Qty: 3, Total: 30000 } 
    ],
    schema  : {
        model: {
            id : "Id",
            fields: {
                Id       : { type: 'number' },
                ItemName : { type: 'string' },
                Price    : { type: 'number' },
                Qty      : { type: 'number' },
                Total    : { type: 'number', editable: false }
            }
        }
    }
};

Then your Grid should be something like:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : "incell",
    pageable  : false,
    columns   :
    [
        { field: "ItemName", title: "Item Name" },
        { field: "Price", title: "Price" },
        { field: "Qty", title: "Qty" },
        { field: "Total", title: "Total" }
    ]
}).data("kendoGrid");

What you need to add to Grid definition is the save event handler that check which field has changed using e.values (where e is the event information received by save) and compute the new Total and set it using set method on the model.

    save : function (e) {
        if (e.values && (e.values.Qty || e.values.Price)) {
            var qty = e.values.Qty || e.model.Qty;
            var price = e.values.Price || e.model.Price;
            e.model.set("Total", price * qty);
        }
    }

Example here : http://jsfiddle.net/qA8QX/