angular-ui / ui-grid

UI Grid: an Angular Data Grid
http://ui-grid.info
MIT License
5.39k stars 2.47k forks source link

columnWidth not correctly computed if table initialized hidden #6090

Open xingzhuo1983 opened 7 years ago

xingzhuo1983 commented 7 years ago

brief desc:
condition: width is not fixed px but %, result: columnWidth not correctly computed if table initialized hidden and then click somewhere to show it steps:

  1. html like this: <div ng-show='table.show'><div ui-grid='table.option' style="width: 100%"></div></div> <a ng-click='table.click()'></a>

2 .js $scope.table={ show: false, option:{ .... }, click:function(){this.show = true} }

  1. result: columnWidth value is NaN so that all the width defined in columnDefs doesn't work, the table css looks not correct, and api.core.refresh() doesn't make things work right.
  2. if the initial value of table.show is true, everything works fine.
troywoy commented 7 years ago

Can you use ng-if instead of ng-show? If you use ng-if, then the table won't be initialized until the DOM is actually there.

troywoy commented 7 years ago

I'll add onto that and give you two other options, because by default the grid is not aware of rendering changes.

First, and probably simplest option, is for you to add ui-grid-auto-resize to your DOM. This watches for width/height changes and automatically re-renders your grid for you. A gotcha with this approach is that sometimes IE screws with the calculations and it will constantly grow bigger. This is filed here, so you can use max-width/height or something if it's a problem for you too.

Second, is to call the resize handler yourself during your click event. This is done via gridApi.core.handleWindowResize();. A gotcha with this approach would be digest race conditions. You may or may not need to wrap that in a $timeout(...) in order for the calculations to work correctly.