Changing Angular Model To Update Kendo

I've been using Angular for a project and just recently found out about the Kendo-Angular project over at http://kendo-labs.github.io/angular-kendo/#/. I was successful in adding

Solution 1:

I solved this, but now in the way I was expecting.

I just tied a change event to the input and called the Kendo redraw() method and it redraws every time my model gets updated. A little annoying considering there is an entire effort for this over at Kendo. You would've thought that 2 way binding would be available.

Still looking for a better answer if one exists.

Solution 2:

Note that the author(s) of angular-kendo and/or people with more in-depth knowledge of AngularJS will probably stone me for "doing it wrong", but here goes:

angular-kendo already uses a $watch on the data source, so if you add some code to what it's doing there originally, for example like this:

scope.$watch(attrs.kDataSource, function (mew, old) {
    if (mew !== old) {
        element.data('$kendoDataSource', toDataSource(mew, type));

        var role = element.data("role");
        var widgetType = role.charAt(0).toUpperCase() + role.slice(1);
        var w = element.data("kendo" + widgetType);;

        if (!w) {
            w = kendo.widgetInstance(element, kendo.ui);
        }

        if (w && typeof w.setDataSource === "function") {
            w.setDataSource(element.data('$kendoDataSource'));
        }
    }
}, true);

then the behavior you were looking for works. I'm not sure why this (well, something like it, but much better) isn't implemented; to me, it seems like a core feature, but there are probably reasons which I don't understand (I haven't really read all of the source code here). In any case, having to manually attach a change event handler to an input to update your UI doesn't seem very "angular" to me either.

Demo for giggles. Disclaimer: I'm not responsible for anything. Don't use this.

Edit: after taking a look at the angular-kendo issue tracker, it looks like they intend to do something similar (judging from a comment by @BurkeHolland here), so maybe this is not completely wrong; I updated the demo to be a bit more readable

Solution 3:

I'm not crazy about this solution but I think this is the best way to do the binding at this time. The solution is to use either kendo.data.ObservableArray or kendo.data.DataSource to back the datagrid and then update the ObservableArray or DataSource in the controller:

angular.module('MyApp').controller('MyController', function($scope, $http) {
    $scope.products = new kendo.data.DataSource({
        data: [],            // kendo watches this array
        pageSize: 5
    });

    $http.get('data/products.json').then(function(result) {
        // update the Kendo DataSource here.
        $scope.products.data(result.data);
    });
});

The HTML looks like this:

<div kendo-grid
     k-data-source="products"
     k-selectable="'row'"
     k-columns='[{ "field": "ProductName",           "title": "Name" },
                 { "field": "Supplier.SupplierName", "title": "Supplier" },
                 { "field": "Category.CategoryName", "title": "Category" }]'
     k-sortable="true"
     k-groupable="true"
     k-filterable="true">
</div>