Angular-Kendo grid - cancel editing breaks entire grid

Question

I have a grid which works normally while adding, removing, deleting rows.

Now, troubles come when I try to add row and then I click cancel. After that, my entire grid element loses .data('kendoGrid') (it returns undefined after that). I don't have any custom actions defined.

Did anyone run into similar issue?

Answer 1

I found the solution finally...

So, the problem was that I have been using grid like this:

<div class='n-grid' kendo-grid="widget" k-options="gridOptions"></div>

But this kind of using requires additional div wrapper. When I changed it to:

<div>
    <div class='n-grid' kendo-grid="widget" k-options="gridOptions"></div>
</div>

Everything was fine...

I found this out from this part of angular-kendo.js:

self.bind("dataBinding", function(ev) {
  ev.sender.$angular_itemsToCompile().each(function(){
    var el = $(this);
    if (el.attr(_UID_)) {
      var rowScope = angular.element(this).scope();
      // avoid destroying the widget's own scope
      // no idea why we get it, but we do.... :(
      if (rowScope && rowScope !== scope) {
        destroyScope(rowScope, el);
      }
    }
  });

When used without wrapper, cancelling changes in row, destroy parent's scope.

Hope this helps :)