Cannot get reference to kendo grid in angular bootstrap modal window

Question

I am trying to get reference to a kendo grid placed within a template used by bootstrap modal. The same grid works when placed directly in the scope of the app controller, but throws undefined error from the modal instance controller.

Can somebody please tell me what I am doing wrong.

var app = angular.module('plunker', ['ui.bootstrap', 'kendo.directives']);

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';

  $scope.mySource = new kendo.data.DataSource({
          data: [
            {ColumnOne:'One', ColumnTwo:'Two'},
            {ColumnOne:'Three', ColumnTwo:'Four'},
            {ColumnOne:'Five', ColumnTwo:'Six'}
            ]
  });

  $scope.myGridChange = function(){
     var selectedRows = $scope.myGrid.select();
     console.log($scope.myGrid.dataItem(selectedRows[0]));
  };

   $scope.items = ['item1', 'item2', 'item3'];

   $scope.open = function () {

    $modal.open({
      templateUrl: 'myGridTemplate.html', //'myTemplate.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });
   };
});


var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.myTempSource = new kendo.data.DataSource({
          data: [
            {ColumnOne:'One', ColumnTwo:'Two'},
            {ColumnOne:'Three', ColumnTwo:'Four'},
            {ColumnOne:'Five', ColumnTwo:'Six'}
            ]
  });

   $scope.myTempGridChange = function(){
     var selectedRows = $scope.myTempGrid.select();
     console.log($scope.myTempGrid.dataItem(selectedRows[0]));
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

I get Cannot call method 'select' of undefined at

var selectedRows = $scope.myTempGrid.select();

Here is a link to my plnkr

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

Answer 1

Outside of your modal the controller and grid share the same scope. However when they are inside your modal the grid's scope is nested inside the controllers scope. Not entirely sure why that is but here is why it is a problem.

When you have nested scopes the child scope will prototypically inherit from the parent scope. With prototypical inheritance when you set something directly on a child scope it will not override the parent scope. So when Kendo sets $scope.myTempGrid it only gets set on the child scope and when you try to access it from your controller it is not there.

This can get pretty confusing but fortunately if you always avoid binding things directly to the scope you shouldn't run into this sort of problem. For example if you put the grid in some container object from the parent scope then you won't run into this problem.

for example: http://plnkr.co/edit/0VFJfp?p=preview

Controller:

...
$scope.container = {};
...

HTML

...
<div kendo-grid="container.myTempGrid">
...

A better solution is to always use the 'controller as' syntax: http://plnkr.co/edit/Pmjend?p=preview