ui-grid cannot rendered correctly when using ng-show/ng-hide, if you press F12 on the keyboard, it c

ui-grid cannot rendered correctly when using ng-show/ng-hide, if you press F12 on the keyboard, it can do it correctly

up vote 1 down vote favorite 2	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! angularjs  ng-grid  angular-ui-grid  ng-show  ng-hide share edit close delete flag asked  Oct 14 ’15 at 10:24 Vino Dang 695 2 24
	ng-grid also has this issue! –  Vino Dang  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. –  Vino Dang  Oct 15 ’15 at 3: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! –  Vino Dang  Oct 15 ’15 at 3:55      add a comment  |   show 2 more comments
	start a bounty

3 Answers

active
oldest
votes

up vote 1 down vote unaccept	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 share edit flag answered  Oct 15 ’15 at 13:35 valepu 1,335 3 11 34
	Thank u very much! it works! –  Vino Dang  Oct 21 ’15 at 3:25    remember to accept the answer if it’s been of help –  valepu  Oct 21 ’15 at 9:22 ok, i have done it, thx –  Vino Dang  Oct 21 ’15 at 12:28      add a comment

up vote 3 down vote accept	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> share edit flag answered  Aug 13 ’16 at 1:33 tryinHard 106 1 6
	As per the docs ui-grid.info/docs/#/tutorial/108_hidden_grids setting a width and height worked for me. –  vanzylv  Oct 24 ’16 at 12:20   add a comment

up vote 3 down vote accept	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! share edit delete flag answered  Dec 10 ’15 at 13:39 Vino Dang 695 2 24
	add a comment

更多信息，请查看我的stackoverflow: http://stackoverflow.com/questions/33122848/ui-grid-cannot-rendered-correctly-when-using-ng-show-ng-hide-if-you-press-f12-o