3

My code is as below:

<div class="gridStyle" ng-grid="gridOptions" ng-show="flag"></div>

when i set the flag to true, the grid cannot render correctly, if you press F12 on the keyboard, it can show correctly!

Python Basketball
  • 2,320
  • 3
  • 24
  • 47
  • ng-grid also has this issue! – Python Basketball Oct 14 '15 at 10:27
  • what do you mean by Correctly? doesnt show at all? – Ori Price Oct 14 '15 at 10:32
  • does it show correctly if you resize your browser window? if that's the case then you might need to call gridApi.core.refresh(); when you change your flag variable (that's for ui-grid. for ng-grid i think you need to call gridOptions.ngGrid.buildColumns(); ) – valepu Oct 14 '15 at 11:40
  • @OriPrice, it means the page displays incorrectly. – Python Basketball Oct 15 '15 at 03:37
  • 1
    @valepu,yes, when i resize my browser window, it can show correctly! For grid i use the $scope.gridOptions.ngGrid.buildColumns(), it show correctly! Thank u very much! – Python Basketball Oct 15 '15 at 03:55
  • @valepu. i found another one fixed this issue, using nf-if instead of ng-show. what do u think is the reason? – Python Basketball Oct 15 '15 at 06:00
  • because ng-if recreates the table (that is, the DOM object) from scratch instead of just hiding it in the DOM, so you get the call to rebuild the table for free when you show it with ng-if – valepu Oct 15 '15 at 13:33

3 Answers3

5

i also find a solution: use ng-if instead of ng-show/ng-hide, like this:

<div class="gridStyle" ng-grid="gridOptions" ng-if="flag"></div>

Using ng-if also fiexed it for me!

Python Basketball
  • 2,320
  • 3
  • 24
  • 47
5

While I realize this question has aged, none of the solutions worked for me as of today. However, using the ui-grid-auto-resize attribute on my element worked like a charm. 

<div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>
tryinHard
  • 566
  • 8
  • 8
  • As per the docs http://ui-grid.info/docs/#/tutorial/108_hidden_grids setting a width and height worked for me. – vanzylv Oct 24 '16 at 12:20
3

ng-grid and ui-grid don't automatically update the table when hidden or shown. By calling gridApi.core.refresh(); (for ui-grid) and gridOptions.ngGrid.buildColumns(); (for ng-grid) you force the library to rebuild the table according to the current DOM situation

valepu
  • 3,136
  • 7
  • 36
  • 67