How do I bind to a calculated property that depends on an observable array or datasource?

[David]

I have a calculated property named "hasDashboards" that I am binding to with the enabled or visible bindings.

var ViewModel = kendo.data.ObservableObject.extend({

    init: function() {

        kendo.data.ObservableObject.fn.init.call(this);

    }

});

var MyViewModel = ViewModel.extend({

    init: function() {

        ViewModel.fn.init.call(this);

    },

    dashboards: new kendo.data.DataSource({ data: [] }),

    hasDashboards: function() {

        var ds = this.get("dashboards");

        return ds.data().length;

    }

});

 

I have tried doing this with an observable array as well instead of a data source, but neither hook into the binding updates. I can get this to work if I use the trigger() function on the view model and specify the hasDashboards field as a parameter, but I would like to avoid this additional complexity. I know I am doing something unsupported by deriving from ObservableObject directly, but we need availability and also build custom widgets.

I have also tried the observable array doing this.get("dashboards.length") (which is supported according to the docs), but that didn't work either. Let me know, thanks!

[Veselin Tsvetanov]

Hi David,

I am not quite sure that I fully understand the scenario in question. Nevertheless, if you need to notify the computed property for any change, the entire field it depends on should be altered. An implementation like the following should properly update its value:

var newDataSource = new kendo.data.DataSource({ data: [ "test" ] });
this.set("dashboards", newDataSource);
this.get("dashboards").data([ "test" ]);

Here you will find a small sample implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik

[David]

So is it correct to say that if a datasource has an item inserted or removed the computed property would not be updated? That is my scenario. It seems that unless I replace the entire property, regardless of the underlying value being observable array, it does not get notified, so I have to use trigger("dashboards").

[Veselin Tsvetanov]

Hello David,

Yes, that is correct. If an item in the DataSource has changed or it has been removed added from its collection, the computed property will not be notified. That is why you will need to either change the entire DataSource, or use the .trigger("change", { field: "dashboards" }) call.

Regards,
Veselin Tsvetanov
Progress Telerik