0

I am using 50px as height of each row in my grid and setting the height using the following logic:

$http.get(url)
  .success(function(data) {
      $scope.gridOptions.data = data;
      heightGrid = ($scope.gridOptions.data.length * 50 + 35) + 'px';
      angular.element('#gridContainer').height(heightGrid);
});

The problem I am facing is the last row of the grid is not shown until some opertaion is performed like a window resize, inspecting the web page or sorting the contents of ui grid. As per my observation on this behaviour, I noticed that the div having the class "ui-grid-content-wrapper" is getting assigned 26px less than the height assigned until any one of the above mentioned event occurs. ost that everything works fine. It just happens for the first time.

Please share a solution if anyone has faced this.

Peter
  • 10,492
  • 21
  • 82
  • 132
  • It sounds like however your data is getting fed in is outside of a digest cycle. How are you binding the data. – David L Apr 02 '16 at 18:17
  • I am making a http post request to web service. After the promise is resolved the data is assigned to grid. Plus I am having all the data returned from service. Even the last row is visible on inspect. Its just that the container div for the ui grid "ui-grid-content-wrapper" is not getting assigned proper height. – Peter Apr 02 '16 at 18:20
  • pls share if you gotta solution for this. – Peter Apr 03 '16 at 05:03

1 Answers1

0

You can use their auto-resize directive, as shown in their tutorial Page.

<div ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>

But beware:

Note: This works by adding a checker on 250ms interval that sees if the grid element has changed in size. It could potentially affect the performance of your site or application negatively.

CMR
  • 933
  • 1
  • 7
  • 8