$kendoDataSource doesn't update binding for KendoGrid

[chrisyboy53]

I have a binding on a KendoGrid.

Now I'm unsure if I'm using Angular-Kendo correctly but I have in my scope a basic array, which gets rendered fine on startup.

I then attempt to add a new item in the array and set the array to trigger off a change on the $watch on the scope.

Now the code seems to execute fine, however the KendoGrid doesn't notice the change as it changes on $kendoDataSource but no rerender :-(.

I have read through the Angular-Kendo Code and come up with a solution to my problem. But I'm just wondering if anyone was able to update the bindings with the current code currently.

Bellow is my solution to my problem. This was just a quick fix so no doubt there is a better way of handling this binding.

// Keep the element's data up-to-date with changes.
$scope.$watch($attrs.kDataSource, function(newDS, oldDS) {
  if (newDS !== oldDS) {

      var data = $element.data('$kendoDataSource');

      if (data != undefined && data != null) {
          var length = data._data.length;
          for (var i = 0; i < length; i++) {
              var tmpObj = data.at(0);
              data.remove(tmpObj);
          }
          for (var j = 0; j < newDS.length; j++) {
              data.add(newDS[j]);
          }
      }
  }
});

Now I'd prefer not to have DataSource Kendo object in my controller code, and stick with basic arrays. And it seems this API already creates Kendo DataSource's already.

This was the original code

// Keep the element's data up-to-date with changes.
$scope.$watch($attrs.kDataSource, function(newDS, oldDS) {
if( newDS !== oldDS ) {
  $element.data('$kendoDataSource', toDataSource(newDS));
}
});

[burkeholland]

Hi @chrisyboy53! Do us a favor and create a plunker demonstrating the issue?

http://plnkr.co/edit/tpl:wj0Q4i1RKJu9G2UquC7d

[chrisyboy53]

Hi @burkeholland thanks for the reply. I have come up with a sandbox of the issue, just click "Add Scooby" and you'll see what I mean about this bug.

http://plnkr.co/edit/UOWSw1?p=info

I believe my fix works only when you set the array again rather than just pushing new elements in the array.

[burkeholland]

@chrisyboy53 We should probably add better watchers for widgets bound to scope collections and do the update for you, but in the meantime you can use a Kendo Observable Array.

http://plnkr.co/edit/qSkPqF?p=preview

[netzdoktor]

Hey @burkeholland,

I modified your plunker (http://plnkr.co/edit/3Z8hlWV3PoYaPvpgnRzM?p=preview) in a way that the normal KendoData sources are bound to the grid via Angular. Beneath the grid I have a traditional ng-repeat directive that offers input-boxes to change content.

Unfortunately, neither of the binding-directions is working (change in grid -> list updated / field modified -> grid updates). This makes the component nearly useless in a scenario, where an Angular-driven application handles scopes and Kendo is used for the presentation.

How important is this issue at the moment?

[mishoo]

There is no good way to support plain arrays directly, so you'll have to use a kendo.data.ObservableArray instead.

[drmikeh]

For more details on using kendo.data.ObservableArray or kendo.data.DataSource see my answer at http://stackoverflow.com/questions/21031735/changing-angular-model-to-update-kendo/22997017#22997017