使用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