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
   

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
   

• javascript
• angularjs
• angular-ui-grid

• Hese is the example of swap data, and the resolved issue.Does it work for you? – Yin Gang Commented May 27, 2016 at 13:52
• Hi Yin, thanks for the links. The issue was just about missing CSS width and height attributes. There was also additional issue - see accepted answer. – Piotr Zakrzewski Commented May 31, 2016 at 10:24

4 Answers 4

It's a known bug when the gridOptions.data length doesn't change after update, proposed solution is to clear data and with use of $timeout refresh it

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

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, additionally both data and columnDefs need to be cleared before that. Otherwise it change might not bee visible and table contents and headers will remain unchanged (known bug in ui-grid as @maurycy mentioned)

Putting the window resize handler on $interval has worked for me in the past inside the gridOptions.onRegisterApi method:

var gridResizeHandlerInterval; 

$scope.gridOptions = {
  ..., // etc.
  onRegisterApi: function(gridApi) {
    ctrl.gridApi = gridApi;

    gridResizeHandlerInterval = $interval( function() {
      $scope.gridApi.core.handleWindowResize();
    }, 10, 500); 
  }
};

And then make sure you tidy up and cancel the interval when your controller gets destroyed:

$scope.$on('$destroy', function() {
  $interval.cancel(gridResizeHandlerInterval);
}); 

Hope this helps you...

You can try the below:

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

Hope this helps!