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

4 posts, 0 answers
  1. David
    David avatar
    2 posts
    Member since:
    Sep 2013

    Posted 09 May Link to this post

    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!

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 13 May Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. David
    David avatar
    2 posts
    Member since:
    Sep 2013

    Posted 13 May in reply to Veselin Tsvetanov Link to this post

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

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1053 posts

    Posted 15 May Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top