CODEWITHSUNDEEP
angularjsangular-ui-bootstrapng-grid
vicont
vicont

Reputation: 628

Combining ng-grid and ui.bootstrap.modal

I'm trying to put ng-grid on the modal window (ui.bootstrap.modal). When grid placed on the main page, everything is ok.

But when I place it into 

<script type="text/ng-template"...></script>

I'm getting the following:

"TypeError: Cannot set property 'gridDim' of undefined".

Is there some workaround to place ng-grid on a modal window?

My plunk is here: http://plnkr.co/edit/ctLF6j3WeqSvT3vEM40f?p=preview

Upvotes: 0

Views: 3025

Answers (1)

shaunhusain
shaunhusain

Reputation: 19748

http://plnkr.co/edit/SkqwlmfSM6jpgS9rR5Ad

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

$scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}, {field: 'remove', displayName:'', cellTemplate: removeTemplate}]
};
$scope.myData = [{name: "Moroni", age: 50},
                 {name: "Tiancum", age: 43},
                 {name: "Jacob", age: 27},
                 {name: "Nephi", age: 29},
                 {name: "Enos", age: 34}]; 
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

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

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

The modal has it's own scope not inheriting from the scope where you defined the gridOptions, this error occurs if it can't find the gridOptions to set the gridDim on it.

Upvotes: 3

Related Questions