Piotr Zakrzewski Piotr Zakrzewski - 6 months ago 280
AngularJS Question

Angular ui grid does not show content unless browser window is resized

I am using angularjs 1.5.0 with angular ui grid 3.1.1.
When I assign gridOptions (passed to the grid directive) object in controller body like this:

$scope.gridOptions = {
data: [{"mock2": 1, "mock1": 2}, {"mock2": 10, "mock1": 22} ]
};


HTML:

<div ui-grid="gridOptions"></div>


It displays the table as expected. But when I try to change data inside $scope.on:

$scope.$on('update', function (event, passedFromBroadcast) {
$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;
});


It renders only frame of the table, when including pagination it will also render pagination related controls - but not the content itself.
Content (the rows and column headers) appear only after I resize my browser window.


  1. Why doesn't angular-ui grid update table content when the data changes inside $scope.on?

  2. How can I manually update the angular ui grid table?
    Things I already tried:

    $scope.gridApi.core.handleWindowResize(); // Does not work
    $scope.gridApi.core.refresh(); // Does not work
    $timeout(function(){$scope.gridOptions.data= [{"mock2": "set", "mock1": "inside"}, {"mock2": "$scope", "mock1": "on"} ] ;}) // Does not work


Answer

There are a two issues with this code, but the reason for the table contents showing only after browser window resize is lack of css class defining width and height, basic (working) example:

    .grid {
      width: 500px;
      height: 250px;
     }

and in HTML:

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

The Other issue (mentioned by other people in this thread:

  • assigning gridOption fields (data but also columnDefs) must be done inside $timeout. Otherwise it change might not become visible and table contents and headers will remain unchanged (known bug in ui-grid as @maurycy mentioned)