ui-grid: Grid not rendered correctly when using ng-show / ng-hide

Steps to reproduce:

  • Create a grid
  • Add the ng-show directive and tell the grid to only show when more than 0 items are available
  • Initialize your items with an empty array
  • Fill in data to your items array at a later point in time (web service, timeout, …)

Expected result:

  • The grid is initially hidden, and gets shown once the data are set.

Actual result:

  • The grid is initially hidden, and stays hidden once the data are set.

Versions used:

  • AngularJS 1.2.2
  • ngGrid 2.0.7

About this issue

  • Original URL
  • State: closed
  • Created 11 years ago
  • Comments: 30

Most upvoted comments

Encountered the same issue. Using ng-if instead of ng-show/ng-hide seems to correct the issue.

add ui-grid-auto-resize attribute to your ui grid will solve your problem. don’t use ng-if while ui grid got involved, that is really SLOW operation while your data is big.

good luck.

ng-if instead of ng-show/ng-hide worked for me

This is still an issue for me with ui-grid 4.0.7.

Doesn’t solve for me with angular 1.4.

The quickest option is to add ‘ui-grid-auto-resize’ in your dom element - <div ui-grid="gridOptions" ui-grid-edit class="grid" ui-grid-auto-resize></div>

Thanks @pmacmillan, ng-if fixed the problem for me.