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. github.com/Den-dp/ui-grid-auto-fit-columns/issues/9 — Nico Van Belle
– Nico Van Belle, Commented Jun 12, 2017 at 8:47

Deepak Patidar · Accepted Answer · 2017-06-13 12:25:22Z

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, 2017 at 12:25

Deepak Patidar

3941 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vitthal Mahale Over a year ago

I suggested same

Al Ex Tsm · Accepted Answer · 2017-06-12 09:35:35Z

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, 2017 at 9:35

Al Ex Tsm

2,1122 gold badges31 silver badges50 bronze badges

Comments

2 revs · Accepted Answer · 2017-06-12 11:32:16Z

-1

   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);
}]);

edited Jun 12, 2017 at 11:32

community wiki

2 revs
Vitthal

3 Comments

Vitthal Mahale Over a year ago

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning',

Al Ex Tsm Over a year ago

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: github.com/Den-dp/ui-grid-auto-fit-columns/issues/10

Didier68 Over a year ago

Thanks for this comment ! For to be more explicit, the solution is something like : $timeout(function () { $scope.data = result.data; }, 100);

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related