CODEWITHSUNDEEP
mvvmdatasourcekendo-ui
Matteo Piazza
Matteo Piazza

Reputation: 2502

KendoUI: binding view model to datasource change

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>

Upvotes: 3

Views: 5237

Answers (2)

Matteo Piazza
Matteo Piazza

Reputation: 2502

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>

Upvotes: 2

Matteo Piazza
Matteo Piazza

Reputation: 2502

So far I have found a solution similar to my previous post (bind HTML elements to grid selected row/dataItem), setting the value in the "change" event of the grid binded to the datasource:

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

$("#grid").kendoGrid({
    change: function(e) {
        vm.set("totAmount", this.dataSource.aggregates().totAmount);
    }
});


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

Upvotes: 0

Related Questions