Displaying ng-grid correctly in modal

I was playing with this plnkr: http://plnkr.co/edit/DRJtivCrxQy4s22ntsci

The controller is:

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope) {})

.controller('DisplayCtrl', function($scope, ModalFactory) {

 $scope.array = null; //initialize to null

 $scope.run = function() { 

var array = [{ //arbitrary array of UNKNOWN fields
  "a": 0,
  "b": 1
}, {
  "a": 1,
  "b": 8
}, {
  "a": 2,
  "b": 5
}, {
  "a": 3,
  "b": 7
}, {
  "a": 4,
  "b": 0
}, {
  "a": 5,
  "b": 3
}, {
  "a": 6,
  "b": 6
}, {
  "a": 7,
  "b": 4
}, {
  "a": 8,
  "b": 2
}, {
  "a": 9,
  "b": 9
}];

    $scope.array = array;
    ModalFactory.init($scope).then(function(modal) {
                            modal.show();
                });
}

});

Modal is created via a factory:

angular.module('modalfactory',['ionic'])
.service('ModalFactory', function($ionicModal, $rootScope) {
var init = function($scope) {
var promise;
$scope = $scope;
promise = $ionicModal.fromTemplateUrl('array.html', {
  scope: $scope,
  animation: 'slide-in-up'
}).then(function(modal) {
  $scope.modal = modal;
  return modal;
});
$scope.openModal = function() {
   $scope.modal.show();
 };
 $scope.closeModal = function() {
   $scope.modal.hide();
 };
 $scope.$on('$destroy', function() {
   $scope.modal.remove();
 });
return promise;
}
return {
init: init
}
})

If you click Display a modal window pops up. I want to be able to display any arbitrary array in it. ng-grid doesn't work the way I want it to. How can we accomplish this?

There is a lot wrong with the plunker. You are not adding ui.grid module as a dependency and the version of ui.grid you are using actually is for the ng-grid module (an earlier version).

Here is an updated plunker that shows the columns rendering in the dialogue: http://plnkr.co/edit/BQbSU0iDboS23YISfWGY?p=preview

To make this work, I had to:

  • Take the cordova.js script tag out
  • Add 'ng-grid' module to the app.js module dependencies
  • Change the directive name from ui-grid to ng-grid
  • concat the array data so that the same object reference is used.

This should help get you going.

I found out that this was actually due to the style sheet. I used the customizer app and downloaded a new CSS. Grid worked without any changes.