angular ui grid Error: not found: .ui-grid-header-cell .ui-grid-cell-contents

Question

Trying to find the issue causing the seconD table not to render and throwing following error: VM16604 angular.js:13236 Error: not found: .ui-grid-header-cell .ui-grid-cell-contents

I am using Using:

https://www.npmjs.com/package/ui-grid-auto-fit-columns

http://ui-grid.info/

JS:

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.autoFitColumns','ui.grid.resizeColumns']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {

    $scope.gridOptions = {};

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = [data[0]];

    });
  $scope.gridOptions.columnDefs = [

    { name:'eee' },
    { name:'age'  },
    { name:'address.street'}
  ];


  $scope.gridOptions2 = {};
    $scope.gridOptions2.data = [{'nameA':'contentA1','nameB':'contentB1'},{'nameA':'contentA2','nameB':'contentB2'}];
      $scope.gridOptions2.columnDefs = [{name:'nameA'},{name:'nameB'}];



console.log($scope.gridOptions);
console.log($scope.gridOptions2);
}]);

HTML:

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="https://npmcdn.com/angular-ui-grid@latest/ui-grid.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
  <script src="https://npmcdn.com/angular-ui-grid@latest/ui-grid.min.js"></script>
  <script src="https://npmcdn.com/ui-grid-auto-fit-columns@latest/dist/autoFitColumns.min.js"></script>
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div>
  <div ui-grid="gridOptions"
        ui-grid-auto-fit-columns
        ui-grid-pagination
        ui-grid-resize-columns
        class="full-height"></div>

    <div ui-grid="gridOptions2"
        ui-grid-auto-fit-columns
        ui-grid-pagination
        ui-grid-resize-columns
        class="full-height"></div>      
        </div>
</div>


    <script src="app.js"></script>
  </body>
</html>

plnkr with error: http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview

Looks like an open issue. https://github.com/Den-dp/ui-grid-auto-fit-columns/issues/9 — Nico Van Belle, Jun 12 '17 at 08:47

score 1 · Answer 1 · answered Jun 13 '17 at 12:25

1

I checked your plunker its related to "ui-grid-auto-fit-columns" in second gridOptions2 once you removed from html, it will start working.

answered Jun 13 '17 at 12:25

Deepak Patidar

384
1
8
23

I suggested same – Vitthal Mahale Jun 15 '17 at 11:29

score 0 · Accepted Answer · answered Jun 12 '17 at 09:35

0

Seems like it is a reported issue which has a workaround by not defining gridOptions synchronously....

https://github.com/Den-dp/ui-grid-auto-fit-columns/issues/10

answered Jun 12 '17 at 09:35

Al Ex Tsm

2,042
2
29
47

Vitthal Mahale · Answer 3 · 2017-06-12T11:32:16.243

   Now its working, try with following code, I have remove ui-grid-auto-fit-columns derective from your html div and also remove dependancy from module 'ui.grid.autoFitColumns'

    <div ng-controller="MainCtrl">
      <div>
      <div ui-grid="gridOptions"
            ui-grid-pagination
            ui-grid-resize-columns
            class="full-height"></div>

        <div ui-grid="gridOptions2"
            i-grid-auto-fit-columns
            ui-grid-pagination
            ui-grid-resize-columns
            class="full-height"></div>      
            </div>
    </div>


var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning',
'ui.grid.resizeColumns','ui.grid.selection', 'ui.grid.resizeColumns']);

app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {

    $scope.gridOptions = {};

  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = [data[0]];

    });
  $scope.gridOptions.columnDefs = [

    { name:'eee' },
    { name:'age'  },
    { name:'address.street'}
  ];


  $scope.gridOptions2 = {};
    $scope.gridOptions2.data = [{'nameA':'contentA1','nameB':'contentB1'},{'nameA':'contentA2','nameB':'contentB2'}];
      $scope.gridOptions2.columnDefs = [{name:'nameA'},{name:'nameB'}];



console.log($scope.gridOptions);
console.log($scope.gridOptions2);
}]);

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', — Vitthal Mahale, Jun 12 '17 at 11:23
you are not soling the issue, you are removing the buggy module and its desired functionality. The fix is to define gridOptions asynchronously as describe in the issue or use a timeout: https://github.com/Den-dp/ui-grid-auto-fit-columns/issues/10 — Al Ex Tsm, Jun 13 '17 at 13:58
Thanks for this comment ! For to be more explicit, the solution is something like : $timeout(function () { $scope.data = result.data; }, 100); — Didier68, Jul 13 '18 at 09:20

angular ui grid Error: not found: .ui-grid-header-cell .ui-grid-cell-contents

3 Answers3