Lars335 Lars335 - 1 year ago 193
AngularJS Question

Calculated field not updating with Kendo-UI grid and AngularJS

I have a kendo-ui grid with order lines. There is a

column. The Total column is calculated
( Qty x Price )

For editing, I use a custom popup Window which displays some additional information and lets the user change the
. When they do this, I want the
to update automatically in the custom edit form.

Here is the grid's column definition for the total column:

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

Here is the input field in the edit form:

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

Here is the problem: when I change the quantity or price in the edit form, the total gets updated only in the grid (which is underneath the pop-up edit form), but the total field in the edit form does not (it is empty).

As a test, I put both
in the edit form;

  • the former is null

  • the latter is the static number that was the result of the
    calculation when the form was rendered

it does not get updated.

Here is a Plunker that shows the issue:

How to make the total field in the edit form calculated?
(preferably using the Kendo-ui template mechanism or AngularJS, but a jQuery hack would do as a last resort)?

Answer Source

Templates don't provide two-way data-binding, so they won't automatically update after they're first generated.

You probably want to use a calculated field for your model in the data source schema:

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download