Kendo grid dynamic edit

Question

i'm using kendo ui for html5 web app. and i need to edit only one column (ie, Unit) and when it is changed, the Amount column should update automatically. for example:

1 unit = $10, if i change 1 unit to 5, then amount changes to $50.

How can i achieve this.

Previously I posted a part of my code. now i have done a telerik dojo example. please take a look here

Working Example with Source code

Update #1:

The demo looks clumsy, i'm sorry for that. click the button with number in first page, then click the cart icon on the top right corner.

This image explains what i want to do with that cart page How can i do that?

Update #2:

Thanks to @RobertoDeLaParra For his solution, i came closer completing. but i have a new issue.

When i change the Unit, the aggregate and the Amount field in edit box, doesn't change.

Please take a look at this dojo,

http://dojo.telerik.com/@varanjith/ePOrA/5

Thank you.

Answer 1

Hi change your amount field for this:

   {
    field: "Amount",
    title: "Amount",                  
    footerTemplate: "<div class='ra'>#= sum # </div>",
    template: "<div class='ra'>#= Amount * Unit # </div>"
   }

and after initializing the cartGrid add this:

var cartGrid = $("#CartGrid").data("kendoGrid");
cartGrid.bind("edit", function (e){
            //console.log(e.model);
            var unitPrice = e.model.UnitPrice;
            var unit = e.model.Unit;
            //This code replace the input generated by kendo with our custom HTML 

            $("td[data-container-for='Amount']").html(unitPrice*unit);
});