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 https://github.com/angular-ui/ng-grid/issues/2195#issuecomment-64054619.

[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.

[eburi]

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

[silicon-simit]

Hi eburi,

Are you able to tell us where the code for the fix was placed or where it should go in the code?

[boubech]

I upgraded to 3.2.5, I have the same issue.

[akosidoctor26]

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>

[abhinavsayan]

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

[blakecausey]

@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)

[kensplanet]

Still have this issue on v4.0.4

After resizing,

[odravison]

Did anyone resolve this issue? I'm trying and couldn't resolve with setTimeout solution

[ottorato]

Solved with 'ui-grid-auto-resize'.

[rkmagnificent]

Coincidentally opened this issue and today is 3rd anniversary 😄

[StewartSweet]

eburi's timeout + manual window resize solved it for me. The system I fixed this for already used ui-grid-auto-resize.

[JLuitjens]

Leaving a note that I do not get this issue in 4.0.7, but I get it in 4.4.9

Very clear reproduction steps in my case, 1) Click 'refresh' icon above grid (triggers below set) I have a refresh sets gridData undefined , ng-show triggers, off, gridData gets set, ng-show triggers on, 2) get picture like @eburi

switch to 4.0.7, isn't there.

I also like to note that scrollbar in 4.0.7 doesn't appear where in 4.4.9 it shows but as disabled (when not needed or uigridconstant even set)

[mportuga]

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.

[JLuitjens]

@mportuga I was wondering if the scrollbar is the cause, but it may be a red herring, I haven't had the time to go through the versions to figure out which one is causing it and what is the case of it...

Now that I think about it, with cell-nav enabled... when the grid in the new versions > 4.0.7 untested, shows the scrollbars always as disabled, the cellnav probably bugs out when you use the arrows keys on the grid towards the bottom of the grid when the scrollbar is disabled but shown now?

When I say 'bugs out', meaning that the scrollbar doesn't scroll to the bottom when cellnav reaches the last row (so current cellnav is off the visual user display) and that is because of the offset not being calculated

Anyways that's a new issue unless you can reference that somewhere, I'll need to test and get issue up here.

[st3pbyst3p]

Don't know about scrollbar, but certain is that in version v4.1.3 it works fine for me, and when updating to v4.4.11 - I get the same unwanted behaviour.

First launch it renders just fine, but when going back to the old state with grid, it doesn't, unless I interact with it.

[st3pbyst3p]

It seems like the problem is in the new version of uiGridAutoResize directive.

The fix for me was to override it with the old version of the same directive, which looks like that:

module.directive('uiGridAutoResize', ['gridUtil', function(gridUtil) { return { require: 'uiGrid', scope: false, link: function($scope, $elm, $attrs, uiGridCtrl) { var timeout = null;

    var debounce = function(width, height) {
      if (timeout !== null) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(function() {
        uiGridCtrl.grid.gridWidth = width;
        uiGridCtrl.grid.gridHeight = height;
        uiGridCtrl.grid.refresh();
        timeout = null;
      }, 400);
    };

    $scope.$watchGroup([
      function() {
        return gridUtil.elementWidth($elm);
      },
      function() {
        return gridUtil.elementHeight($elm);
      }
    ], function(newValues, oldValues, scope) {
      if (!angular.equals(newValues, oldValues)) {
        debounce(newValues[0], newValues[1]);
      }
    });
  }
};

}]);

[akhilmekkatt]

any fix is available for this ?

[SensationSama]

I've now tried

1. Setting a static width of the div (works but is useless for production)
2. Removing the ui-grid-auto-resize directive
3. using a setTimeout to load in data
4. calling gridAPI.core.refresh

I'm assuming handleWindowResize only sets the event listener, rather than the desired behavior of calling the internal that 're-renders'

this.test = () => {
      this.$timeout(() => {
        this.gridApi.core.handleWindowResize();
        console.log('this fires but nothing happens');
        }, 1000);
    }

[tedwards44]

I have used $scope.$apply() right after receiving my data. works perfectly

[phyzalis]

I am experiencing same kind of issue when using bootstrap tabs.

Everything was fine with uiGridAutoResize in 3.11 then when upgrading to 4.8.3 I have this issue.

I think the watchCollection inside uiGridAutoResize is not fired fast enough where in 3.11 it was a check every 250ms