CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-grid
Rafa
Rafa

Reputation: 2027

Not able to display ui-grid in ui-bootstrap modal windown

[SOLVED] I figured this out. The issue is related to modal sizing, if you resize the window the grid will be displayed. Adding auto-resizing directive solved the problem. See more details at http://ui-grid.info/docs/#/tutorial/213_auto_resizing I have the impression that there is some sort of conflict between the grid's style and bootstrap style (CSS and DIVs structure)...

[ORIGINAL POTS]

Help wanted!

I am not able to display an ui-grid in a modal window generated by ui-bootstrap. The modal window comes up but the grid is not rendered. I am able to render other grids outside a modal window.

Basically speaking, it is hosted in Plunker. This is what I have:

index.html

<div ng-controller="TradeListController">
  <button type="button" ng-click="openBoardgamegeekSearchWindow()">Search Board Game in Modal Window</button>
</div>

components/MtApp.js

var mtApp = angular.module('mtApp', ['ui.bootstrap', 'ui.grid']);

var TradeListController = function($scope, $modal) {
  //=== Modal Window : Boardgamegeek Search ===//
  $scope.openBoardgamegeekSearchWindow = function() {
    console.log("Opening boardgamegeek search in modal window.");
    var modalWindow = $modal
      .open({
        templateUrl: 'components/boardgamegeek/boardgamegeek-search.html',
        controller: 'BoardgamegeekSearchController',
      });
    modalWindow.result.then(function(modalReturn) {
      console.log("Boardgamegeek search window returned: ", modalReturn);
    }, function() {
      console.log('Boardgamegeek search window returned dismissed.');
    });
  };

};

angular.module('mtApp').controller('TradeListController', TradeListController);


var BoardgamegeekSearchController = function($scope, $modalInstance) {
  //=== Properties ===//
  $scope.boardGames = [{
    tradeListId: 666666666,
    boardgamegeekId: 42533,
    name: "QWERTY",
    thumbnailURL: "http://cf.geekdo-images.com/images/pic485388_mt.jpg"
  }];

  //=== Grid to render board games ===//
  $scope.gridOptions = {
    data: $scope.boardGames,
    columnDefs: [{
      field: 'name',
      name: 'Name'
    }]
  };

};

angular.module('mtApp').controller('BoardgamegeekSearchController', BoardgamegeekSearchController);

components/boardgamegeek/boardgamegeek-search.html

<div ui-grid="gridOptions"></div>
gridOptions = {{gridOptions}}

Upvotes: 1

Views: 3313

Answers (2)

Rafa
Rafa

Reputation: 2027

I figured this out. The issue is related to modal sizing, if you resize the window the grid will be displayed.

Adding auto-resizing directive solved the problem. See more details at http://ui-grid.info/docs/#/tutorial/213_auto_resizing

I have the impression that there is some sort of conflict between the grid's style and bootstrap style (CSS and DIVs structure)...

Upvotes: 2

Aneesh Kallarakkal
Aneesh Kallarakkal

Reputation: 333

This link can be useful , it covers a basic guide to migrate from ng-grid to ui-grid https://technpol.wordpress.com/2014/08/23/upgrading-to-ng-grid-3-0-ui-grid/

Upvotes: 1

Related Questions