ui-grid: Grid not rendering until manual browser re-sizing

When first loading a page, the following text is displayed rather than the grid: before

By resizing the browser a couple of pixels (horizontally or vertically), the grid refreshes to display properly: after

Notes:

The presence or absence of ui-selection does not appear to make a difference.
The behavior is the same in Chrome and Firefox (couldn’t test IE)
Version 3.0.0-rc.16

Here is the grid invocation:

Here are the grid config settings:

$scope.gridResearchOptions = {
      enableColumnResizing: true,
      enableGridMenu: true,
      enableRowHeaderSelection: true,
      enableRowSelection: true,
      enableSelectAll: true,
      multiSelect: true,
      modifierKeysToMultiSelect: false,
      noUnselect: false,
      resizable: true,
      columnDefs: [
         ...
      ],
      data:  [ {
            ...
            }
         ]
   };

About this issue

Original URL
State: open
Created 10 years ago
Comments: 29 (4 by maintainers)

Most upvoted comments

Try adding ui-grid-auto-resize, it worked for me.

<div ui-grid="options" ui-grid-auto-resize ui-grid-resize-columns ui-grid-move-columns></div>

akosidoctor26 on Aug 29, 2016

@abhinavsayan is right that not having a fixed width is the problem. I recommend that every comrade in the world restrict all grids to 100 pixels wide forever no matter what the content or device since we all know that fixed sizes are the way to go - we must conform to have every web page on the Internet look exactly alike - individualism must not exist - why would anyone want a dynamically sized or responsive website? (sarcasm intended)

blakecausey on Apr 17, 2017

I upgraded to 3.0.5, still same issue.

My fix:

    return $scope.resource.query(queryOptions).$promise.then(function(data) {
        $scope.gridOptions.data = data;
        $scope.loading = false;
        return $timeout(1);
      })
      .then(function() {
        $scope.gridApi.core.handleWindowResize();
      })

eburi on Sep 2, 2015

Hmm, I believe that is because we are defaulting scrollbar to always show. Perhaps we need to change the default for scrollbar to be WHEN_NEEDED.

mportuga on May 7, 2018

Coincidentally opened this issue and today is 3rd anniversary 😄

rkmagnificent on Nov 22, 2017

Solved with ‘ui-grid-auto-resize’.

ottorato on Sep 19, 2017

Try adding a fixed width to the table. The data will be rendered without resizing.

abhinavsayan on Dec 28, 2016

Found a workaround based on this site by using setTimeout after making the ajax call. http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

This bug is a deal breaker for the end users and needs to be addressed. My fix is posted below:

        $scope.LoadGrid = function (id) {
            var params = { billingID: id };
            ajaxCall("/InvoiceDetails.aspx/LoadDetails", params).done(function (data) {                    
                $scope.gridOptions.data = JSON.parse(data.d);
                $scope.gridOptions.columnDefs[0].editDropdownOptionsArray = $scope.optionsList;
            });
            setTimeout(function () {
                $scope.$apply(function () {
                    $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
                });
                CloseWaitDialog();
            }, 800);
        };

zBestData on Aug 28, 2015

I have the same issue:

It’s not consistent and seems to be a timing issue. Added a timeout between configuration an setting data (which is in my case very fast as it’s a result cached by the browser) and this resolved the issue.

Would be great if this could be fixed!

eburi on Aug 12, 2015