Grid not rendering until manual browser re-sizing

[csmiller34]

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

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

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:  [ {
            ...
            }
         ]
   };

[PaulL1]

Are you providing the data directly in line, rather than it being retrieved from a server? I wonder whether that's resulting in the data turning up before the grid is ready for it (which would be a defect at the grid end).

Could you perhaps:

1. Try providing the data inside a $timeout - so perhaps wait 10ms then provide the data. That would tell us if it's the data being provided inline that's the problem
2. Provide a plunker of this, based off one of the tutorials? That would make diagnosis easier

[csmiller34]

Thanks for the reply, Paul.

I'm working on screen mock-ups at the moment, so the data is just coming
from a script.

The page itself has a number of ui-select elements on it (it's a research
page). I tried commenting out some of the ui-select elements and was able
to see the grid loading.

Not sure what the threshold of ui-select elements is... I'll experiment a
bit and try to provide a plunker.

On Fri, Nov 21, 2014 at 6:31 PM, Paul notifications@github.com wrote:

Are you providing the data directly in line, rather than it being
retrieved from a server? I wonder whether that's resulting in the data
turning up before the grid is ready for it (which would be a defect at the
grid end).

Could you perhaps:

1. Try providing the data inside a $timeout - so perhaps wait 10ms
   then provide the data. That would tell us if it's the data being provided
   inline that's the problem
2. Provide a plunker of this, based off one of the tutorials? That
   would make diagnosis easier

—
Reply to this email directly or view it on GitHub
#2195 (comment).

[PaulL1]

No further updates for a few weeks, assuming issue is resolved and closing.

[eburi]

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]

Sorry, forgot the version
From bower.json:
"dependencies": {
"jquery": "~2.1.1",
"bootstrap": "~3.3.4",
"angular-animate": "~1.4",
"angular-cookies": "~1.4",
"angular-touch": "~1.4",
"angular-sanitize": "~1.4",
"angular-resource": "~1.4",
"angular-bootstrap": "0.13.x",
"angular": "~1.4",
"angular-ui-grid": "~3.0.1",
"fuse": "~1.2.2",
"angular-translate": "~2.7",
"angular-translate-loader-url": "~2.7",
"angular-modal-service": "~0.6.7",
"angular-local-storage": "~0.2.2",
"airbrake-js-client": "~0.5.0",
"angular-route": "~1.4.3"
},
"devDependencies": {
"angular-mocks": "~1.4"
},
"resolutions": {
"angular": "~1.4.x"
}

[eburi]

Just updated to 3.0.3 - same issue

[zBestData]

Hi,

I am also having the same issue and loading less than 10 records. Data from server does not show unless browser is resized or data is loaded a second time. Happens in all browsers, Chrome, Firefox and IE. Works fine if loaded from a java script array variable. Is there a command that will force the grid to refresh or render?

[zBestData]

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);
        };

[PaulL1]

You would probably use handleWindowResize, not notifyDataChange.

Are you able to provide a plunker? This never happens on the tutorials that I'm aware of.