albert's blog: [AngularJS] TypeError: Cannot set property 'gridDim' of undefined

2015/03/12

[AngularJS] TypeError: Cannot set property 'gridDim' of undefined

Problem
I have a data grid which implement by ng-grid.
As I click "利率明細", it should popup a modal dialog.

The popup modal dialog will have a data grid in the modal dialog. But as I popup the modal dialog, the data grid does not show properly.

Chrome console have error message:

TypeError: Cannot set property 'gridDim' of undefined
    at ngGridDirectives.directive.ngGridDirective.compile.pre (http://localhost:8080/dbm/assets/ng-grid/2.0.11/ng-grid.js?v=14b4202a:3213:37)
    at nodeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:6559:13)
    at compositeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:5986:15)
    at compositeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:5989:13)
    at compositeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:5989:13)
    at compositeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:5989:13)
    at nodeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:6573:24)
    at compositeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:5986:15)
    at compositeLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:5989:13)
    at publicLinkFn (http://localhost:8080/dbm/assets/angularjs/1.2.16-cht-2/angular.js?v=14b4202a:5891:30) <div class="grid-style ng-scope" data-ng-grid="dbm100eFormGrid4" style="display: inline-block; height: 100px; width: 80%;">

Here is code snippet, ng-grid part, for the modal dialog in HTML:

      <div class="row text-center">
        <div class="col-sm-12">
          <div class="grid-style" data-ng-grid="dbm100eFormGrid4"
               style="display: inline-block; height: 100px; width: 80%;">
          </div>
        </div>
      </div>

Here is code snippet in JavaScript (including how to open modal dialog and define ng-grid in modal dialog):

 // click "利率明細", it should popup a modal dialog
 $scope.showRateDtl = function(row){
     openDialogForTab2(row);
 };
 
 //open modal dialog
 var openDialogForTab2 = function(row){
     var options = {
             templateUrl: 'dbm100eTab4.html',
             controller: ModalInstanceCtrl,
             windowClass: 'app-modal-window',
             backdrop: true,
             keyboard: true,
             backdropClick: true,
             resolve: {
                 model: function(){
                     return row.entity;
                 }
             }
     };

     var modalInstance = $modal.open(options);
   //...
 };
 
 var ModalInstanceCtrl = function($scope, $modalInstance, model) {
     //.....
 };
 
 //declare ng-grid in modal dialog
 $scope.dbm100eFormGrid4 = {
         data : 'dbm100eFormGrid4Data',
         selectedItems: $scope.grid4SelectedRow,
         columnDefs : [
                       { field : 'effcDateB', displayName : '實施日期起', width: 283, cellClass: 'text-left'},
                       { field : 'effcDateE', displayName : '實施日期迄', width: 283, cellClass: 'text-left'},
                       { field : 'debtRate',  displayName : '利率%', width: 283, cellClass: 'text-left'}],
         enableColumnResize :true,
         i18n:'zh-tw',
         multiSelect : false
 };

Solution
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.

Hence, you need to move line31~41 in to ModalInstanceCtrl as bellows:

var ModalInstanceCtrl = function($scope, $modalInstance, model) {
    //...
    $scope.dbm100eFormGrid4 = {
            data : 'dbm100eFormGrid4Data',
            selectedItems: $scope.grid4SelectedRow,
            columnDefs : [
                          { field : 'effcDateB', displayName : '實施日期起', width: 283, cellClass: 'text-left'},
                          { field : 'effcDateE', displayName : '實施日期迄', width: 283, cellClass: 'text-left'},
                          { field : 'debtRate',  displayName : '利率%', width: 283, cellClass: 'text-left'}],
            enableColumnResize :true,
            i18n:'zh-tw',
            multiSelect : false
    };
};