UI Grid won't display

Question

Trying to follow the docs provided here on their website, but still not able to get it to work. I am scanning a table using AWS DynamoDB, and trying to display the information in the table within this UI grid.

My controller:

angular.module('App')
  .controller('GridCtrl', ['modelObjects', '$scope', 'dbCall', function(modelObjects, $scope, dbCall) {

    $scope.gridOptions = {
      enablesorting: true,
      columndefs: [{
        field: 'ref id'
      }, {
        field: 'group'
      }, {
        field: 'cost center'
      }, {
        field: 'cost center description',
      }, {
        field: 'recruitment firm',
        enablesorting: false
      }],
    };

    $scope.updateGrid = function(data) {
      // for (var key in data) {
      //   var item = data[key];
      //   for (var key2 in item) {
      //     console.log(item[key2]);
      //     $scope.gridOptions.data = item[key2];
      //   }
      // }
      $scope.gridOptions.data = data;
    };

    $scope.scanPosition = function() {
      var params = {};
      return dbCall('addGrid', params, $scope.check);
    };

    $scope.check = function(err, data) {
      if (err) {
        $scope.results = "Failure: Unable To Connect To Database";
        console.log(err);
      }
      else {
        $scope.results = "Success: Position Table Scanned";
        console.log(data);
        $scope.updateGrid(data);
      }
    };
    setTimeout(function() {
      $scope.scanPosition();
    }, 50);
  }]);

My View:

<!DOCTYPE html>
<html>
    <head></head>
    <body ng-app="App">
        <div class="col-lg-10 col-lg-offset-2 col-sm-9 col-sm-offset-3 col-xs-12">
            <div class="container-fluid">
                <br>
                <div class="panel panel-default" style="align: center; border:1px solid #d4d4d4;">
                    <div class="panel-heading" style="text-align: center;">
                        <h3>Grid Page</h3>
                    </div>
                </div>
                <div ui-grid="gridOptions" class="myGrid"></div>
            </div>
        </div>
    </body>
</html>

My database is working; I am able to loop and display the information in the console. It just isn't being displayed in the grid. I have no console errors.

Thanks in advance for any help!

score 2 · Accepted Answer · edited Aug 18 '16 at 21:24

2

It looks like you need to set the grid data like this:

$scope.gridOptions.data = data.Items;

Since data.Items is the array of objects.

edited Aug 18 '16 at 21:24

Brendan Green

11,676
5
44
76

answered Aug 18 '16 at 21:21

G Dan

96
1
5

Rani Radcliff · Answer 2 · 2016-08-18T22:02:44.853

1

Try changing "columndefs" to "columnDefs" and "enablesorting" to "enableSorting". That's what I see off of the top, but I'm still looking. You're also missing "ng-controller="GridCtrl" after ng-app="App" in your HTML. Also, make sure you included the script for the grid and injected into your module.

edited Aug 18 '16 at 22:02

answered Aug 18 '16 at 21:13

Rani Radcliff

4,856
5
33
60

score 1 · Answer 3 · answered Aug 18 '16 at 21:25

In Addition to @GDan, there's no controller specified in the HTML file. Only ng-app="App". Try adding ng-controller="GridCtrl" in one of the parent divs surrounding the ui-grid directive.

CodePen and Snippet below: http://codepen.io/Lethargicgeek/pen/rLbZGp?editors=1010

angular.module('App', ['ui.grid']);

(function() {
  angular.module('App').controller('GridCtrl', ctrlFn);
  ctrlFn.$inject = ['modelObjects', 'dbCall', '$timeout'];

  function ctrlFn(modelObjects, dbCall, $timeout) {
    var $ctrl = this;
    // BINDING 
    $ctrl.gridOptions = {
      enableSorting: true,
      columnDefs: [{
        field: 'ref id'
      }, {
        field: 'group'
      }, {
        field: 'cost center'
      }, {
        field: 'cost center description',
      }, {
        field: 'recruitment firm',
        enablesorting: false
      }],
    };
    // END BINDING

    // INIT
    $timeout(function() {
      scanPosition();
    }, 1000);
    // END INIT

    function updateGrid(data) {
      $ctrl.gridOptions.data = data;
    };

    function scanPosition() {
      var params = {};
      return dbCall.dbCall('addGrid', params, check);
    };

    function check(err, data) {
      if (err) {
        $ctrl.results = "Failure: Unable To Connect To Database";
        console.log(err);
      } else {
        $ctrl.results = "Success: Position Table Scanned";
        console.log(data);
        updateGrid(data);
      }
    };
  }
})();

// Mocked Service modelObjects
(function() {
  angular.module('App').service('modelObjects', svcFn);

  function svcFn() {}
})();

// Mocked Service dbCall
(function() {
  angular.module('App').service('dbCall', svcFn);

  function svcFn() {
    var svc = this;
    svc.dbCall = dbCall;

    function dbCall(action, params, callBackFn) {
      // Should really use a promise rather than a callbackFn
      callBackFn(null, [{
        'ref id': "fooRef",
        'group': "fooGroup",
        "cost center": "fooCostCenter"
      }]);
    }
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>

<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<html>

<head></head>

<body ng-app="App">
  <div class="col-lg-10 col-lg-offset-2 col-sm-9 col-sm-offset-3 col-xs-12" ng-controller="GridCtrl as $ctrl">
    <div class="container-fluid">
      <div>$ctrl.results: {{$ctrl.results}}</div>
      <div class="panel panel-default" style="align: center; border:1px solid #d4d4d4;">
        <div class="panel-heading" style="text-align: center;">
          <h3>Grid Page</h3>
        </div>
      </div>
      <div ui-grid="$ctrl.gridOptions" class="myGrid"></div>
    </div>
  </div>
</body>

</html>

UI Grid won't display

3 Answers3