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 vote1down votefavorite

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

shareeditclosedeleteflag

asked Oct 14 '15 at 10:24

Vino Dang

695224

 

 

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

activeoldestvotes

up vote1down voteunaccept

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

shareeditflag

answered Oct 15 '15 at 13:35

valepu

1,33531134

 

 

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 vote3down voteaccept

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>

shareeditflag

answered Aug 13 '16 at 1:33

tryinHard

10616

 

 

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 vote3down voteaccept

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!

shareeditdeleteflag

answered Dec 10 '15 at 13:39

Vino Dang

695224

 

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