Javascript 剑道网格动态编辑

我正在为html5网络应用程序使用剑道用户界面。我只需要编辑一列（即单位），当它被更改时，金额列应该自动更新。例如：

1个单位=10美元， 如果我将1个单位改为5个，那么金额将改为50美元

我怎样才能做到这一点

之前我发布了一部分代码。现在我已经做了一个telerik dojo示例。 请看这里

更新#1:

演示看起来很笨拙，对此我很抱歉。单击第一页带有数字的按钮，然后单击右上角的购物车图标

这张图片解释了我想用购物车页面做什么 我该怎么做

更新#2：

感谢@RobertoDeLaParra 对于他的解决方案，我更接近完成。但我有一个新问题

当我更改单位时，编辑框中的“合计”和“金额”字段不会更改

请看一下这个道场

---

谢谢。

您好，请为此更改您的金额字段：

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

---

您需要将一个模型绑定到模式，并在模型中只生成unit属性editable@RobertoDeLaParra谢谢你的回复，我的朋友。但我使用两个数据源，1。产品&2.Cart。我在产品中选择的一个将插入购物车数据源。那么在这种情况下，如何绑定模式呢？我将模式模型保留为空。您可以共享一个正在工作的jsFiddler吗？我会看一看。@RobertoDeLaParra我已经在这里的链接添加了一个工作演示。。请看我更新的问题。嗨，罗伯托，请看我更新的问题。再次感谢你。

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);
});