Question

I have an observable object which defines a pointer to a datasource binded to a grid, and a custom field which should return an aggregate value I declared in the datasource.

I would like to bind the second field (“totAmount”) to a custom HTML element.

I do not understand how to update its value: when I call the “read()” method of the datasource shouldn’t the binded value also be updated on the interface? Does it work only with “primitive” model fields?

=== JAVASCRIPT ===
var vm = kendo.observable({
    gridDatasource: new kendo.data.DataSource({ ... }),

    totAmount: function() {
        var ds = this.get("gridDatasource");
        var value = (ds.aggregates()) ? ds.aggregates().totAmount : 0;
        return value;
    }
});

=== HTML ===
<span data-bind="text: totAmount"></span>

Answer 1

My previous answer was not totally correct: it binds the model update on grid change (on each row selection). It is better to bind it to the “change” event of the datasource:

=== JAVASCRIPT ===
var vm = kendo.observable({
    gridDatasource: new kendo.data.DataSource({ ... }),
    totAmount: 0
});

vm.gridDatasource.bind("change", function(e) {
    vm.set("totAmount", this.aggregates().totAmount);
});


=== HTML ===
<span data-bind="text: totAmount"></span>