Geek Answers Handbook

Angular grid ui does not display content unless browser window size is resized

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

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

HTML:

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

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

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

It only displays the table frame, when pagination is enabled, it will also display paginated controls, but not the content itself. Content (rows and column headers) only appears after resizing my browser window.

  • Why doesn't angular -ui grid update table contents when data changes inside $ scope.on?

  • How to manually update the angular ui set table? Things I've 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
+5
source share
4 answers

There are two problems in this code, but the reason for the contents of the table, displayed only after resizing the browser window, is the lack of a CSS class that defines the width and height, a basic (working) example:

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

and in HTML:

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

Another issue (mentioned by other people in this thread:

  • the assignment of gridOption fields (data, but also columnDefs ) must be done inside $ timeout, in addition, you must clear the data and columns before doing this. Otherwise, this change may not become visible, and the contents of the table and the headers will remain unchanged (a known error in the u-grid mentioned by @maurycy).
+2
source

This is a known error when the length of gridOptions.data does not change after the update, the proposed solution is to clear the data and using $ 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"} ] ; }); });
+1
source

Putting the window resize handler on $interval 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 remove and cancel the interval when your controller is destroyed:

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

Hope this helps you ...

+1
source

You can try the following:

 $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!

0
source

More articles:


All Articles