使用Kendo-UI网格和AngularJS不更新的计算字段

Question

我有一个带订单线的kendo-ui网格。有一个Qty,Price和Total列。 Total栏的计算结果为(Qty x Price)。

为了进行编辑，我使用了一个自定义的弹出窗口，它显示了一些附加信息，并让用户更改了Qty和Price。当他们这样做时，我希望Total在自定义编辑表单中自动更新。

这里是总列网格的列定义：

{ 
    field: "total", 
    title: "Total", 
    width: 60, 
    template: "#=qty*price#" 
} 

下面是编辑表单的输入域：

<input name="total" style="width: 60px" /> 

这里的问题是：当我改变了数量或价格，总数只在网格中更新（位于弹出式编辑表单下方），但编辑表单中的总字段不包含（它是空的）。

作为测试，我把#=total#和#=qty*price#都放在编辑表单中;

• 前者是空
• 后者是静态的数字，是 计算的结果，当形式呈现

它没有得到更新。

这里是一个Plunker，显示问题： http://plnkr.co/edit/cZw18btauqb9RPEpd5Kc?p=preview

如何在修改形式计算总场？ （最好使用Kendo-ui模板机制或AngularJS，但jQuery hack会作为最后的手段）？

Answer 1

模板不提供双向数据绑定，所以它们在第一次生成后不会自动更新。

你可能想使用一个计算字段在数据源的架构模型：

schema: { 
    model: { 
     id: "itemNo", 
     fields: { 
      id: { 
       type: "string", 
       editable: false 
      }, 
      price: { 
       type: "number" 
      }, 
      qty: { 
       type: "number" 
      } 
     }, 
     total: function() { 
      return this.get("qty") * this.get("price"); 
     } 
    } 
}, 

（demo）

Answer 2

另外，如果您正在使用“盒内”的编辑，你可以使用“变化“grid dataSource的事件来跟踪连接字段中的变化并强制计算的字段更新。这样的例子可以是：

Grid: Incell editing with calculated column auto refresh