The content in Angular UI Grid fails to display until the browser window is adjusted

Question

The content in Angular UI Grid fails to display until the browser window is adjusted

I am currently utilizing angularjs 1.5.0 along with angular ui grid 3.1.1. In my controller, I assign the gridOptions object (which is passed to the grid directive) in the following way:

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

HTML:

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

The table displays correctly at this point. However, when attempting to update the data within $scope.on:

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

Only the frame of the table is rendered. When pagination is included, it will also display pagination controls - but not the actual content itself. The rows and column headers only appear after resizing the browser window.

Why does the angular-ui grid not update the table content when the data changes within $scope.on?

How can I manually trigger an update for the angular ui grid table? Here are the methods I have already attempted:

$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

Answer 1

Answer №1

One common issue occurs when the gridOptions.data length remains unchanged after an update. A suggested workaround is to clear the data and then refresh it using $timeout.

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

Answer 2

One common issue occurs when the gridOptions.data length remains unchanged after an update. A suggested workaround is to clear the data and then refresh it using $timeout.

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

Answer 3

Answer №2

Two key issues are present in the code provided, but the main reason for the table contents only appearing after resizing the browser window is the absence of a CSS class that defines the width and height. Here is a basic example that works:

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

In the HTML:

<div class="table" ui-table="tableOptions"></div>

The other issue, as mentioned by others in this discussion:

When assigning fields to tableOptions (including data and columnDefs), it must be done within $timeout. Additionally, both the data and columnDefs need to be cleared before making any changes. If not, the changes may not be visible and the table contents and headers will remain unchanged (a known bug in ui-table as mentioned by @maurycy)

Answer 4

Two key issues are present in the code provided, but the main reason for the table contents only appearing after resizing the browser window is the absence of a CSS class that defines the width and height. Here is a basic example that works:

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

In the HTML:

<div class="table" ui-table="tableOptions"></div>

The other issue, as mentioned by others in this discussion:

When assigning fields to tableOptions (including data and columnDefs), it must be done within $timeout. Additionally, both the data and columnDefs need to be cleared before making any changes. If not, the changes may not be visible and the table contents and headers will remain unchanged (a known bug in ui-table as mentioned by @maurycy)

Answer 5

Answer №3

One method that has proven effective for me in the past is placing the window resize handler on $interval within the gridOptions.onRegisterApi function:

var gridResizeHandlerInterval; 

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

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

Remember to properly clean up and cancel the interval when your controller is destroyed:

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

I hope this solution proves useful to you...

Answer 6

One method that has proven effective for me in the past is placing the window resize handler on $interval within the gridOptions.onRegisterApi function:

var gridResizeHandlerInterval; 

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

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

Remember to properly clean up and cancel the interval when your controller is destroyed:

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

I hope this solution proves useful to you...

Answer 7

Answer №4

Here is a suggestion you can try out:

$scope.$on('update', function (event, passedData) {
  $scope.gridOptions.data.length = 0;
  $timeout(function(){
    $scope.gridOptions.data = [{"value2": "updated", "value1": "changed"}, {"value2": "$scope", "value1": "broadcast"} ] ;
  });
});

I hope this solution works for you!

Answer 8

Here is a suggestion you can try out:

$scope.$on('update', function (event, passedData) {
  $scope.gridOptions.data.length = 0;
  $timeout(function(){
    $scope.gridOptions.data = [{"value2": "updated", "value1": "changed"}, {"value2": "$scope", "value1": "broadcast"} ] ;
  });
});

I hope this solution works for you!

The content in Angular UI Grid fails to display until the browser window is adjusted

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am looking to superimpose one rectangle over another rectangle

retrieve the classname by tapping into the parsed JSON

Manipulating global state properties within a reducer function in React: How to do it efficiently

Unable to dynamically load a script located in the node_modules directory

Moving icon that appears when hovering over a menu button

methods for extracting header information using JavaScript

Incorporate concealed image into HTML

Include a function call within a ternary operator in JSX code

React: Struggling to retrieve specific elements from an array stored in component state

conceal the "load more" option when no additional content is available for loading

Is there a way to execute a JavaScript file within another JavaScript file?

Retrieving row and column values from an 81-element indexed array

What are some ways to direct users from one page to another without relying on server-side programming?

Exploring the option of showcasing multiple json_encode data on a pie chart

How to host two Node.js socket.io projects on one URL

Is there a way to adjust the image dimensions when clicked and then revert it to its original size using JavaScript?

A method to use jQuery to replace newlines with commas in user input

The $http get request in AngularJS functions properly in Chrome but unexpectedly returns null in FireFox

How can we integrate Cordova plugins into Vue-Cordova framework?

Enhance the timepicker output of angular-ui by converting it into a user-friendly string format