Lars335 Lars335 - 1 month ago 19
AngularJS Question

Calculated field not updating with Kendo-UI grid and AngularJS

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

Qty
,
Price
and
Total
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
Qty
and
Price
. When they do this, I want the
Total
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
#=total#
and
#=qty*price#
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:
http://plnkr.co/edit/cZw18btauqb9RPEpd5Kc?p=preview

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

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

(demo)

Comments