ng-grid does not take 100% width on page load but shows fine on resize

This worked for me

$scope.gridOptions = {
        data: 'gridData',
        init:function(grid,$scope) {
            setTimeout(function() {
                $scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
                    $scope.gridOptions.$gridScope,
                    $scope.gridOptions.ngGrid
                );
            },1000);
        }
    };

Replace "gridOptions" with variable you use and bingo!

I had the same problem using the tabs from Angular UI Bootstrap.

The simplest fix is to trigger the resize event on a parent element of ng-grid,
preferably when the tab containing ng-grid is selected.

The ng-grid will resize itself correctly this event is triggered.

Use something like this:

function onTabSelect() {
  $('.grid-container').trigger('resize');
}

You could use the grids ngGridLayoutPlugin (found here) and call it in the controllers init function.

    var layoutPlugin = new ngGridLayoutPlugin();


    $scope.init = function() {
        $scope.gridOptions = {
            plugins: [layoutPlugin],
        };


        window.setTimeout(function(){
            layoutPlugin.updateGridLayout();
        }, 100);

    };

Try setting ng-if to only include the grid when there is data to show: (ng-hide did not work for me)

<div class="gridStyle" ng-grid="gridOptions" ng-if="myViewModel.Data.length"></div>

Source: https://github.com/angular-ui/ng-grid/issues/855

Related question: When ng-grid change visibility from invisible to visible by ng-hide, grid width not being re-calculated

I have worked out a solution for this.

Just add the following lines in the ng-grid.js inside the ng.EventProvider.

setInterval(function() {
    domUtilityService.RebuildGrid($scope,grid);
}, 30);

This change would be much better in terms of CPU load.

Line 2904

https://github.com/angular-ui/ng-grid/blob/a0d693e413e993145bff274375f1102770585e59/ng-grid-2.0.6.debug.js

From this:

    // we have to set this to false in case we want to autogenerate columns with no initial data.
    grid.lateBoundColumns = false;
    $scope.columns = [];
    grid.config.columnDefs = a;
    grid.buildColumns();
    grid.configureColumnWidths();
    grid.eventProvider.assignEvents();
    domUtilityService.RebuildGrid($scope, grid);
}, true);

To this:

    // we have to set this to false in case we want to autogenerate columns with no initial data.
    grid.lateBoundColumns = false;
    $scope.columns = [];
    grid.config.columnDefs = a;
    grid.buildColumns();
    grid.configureColumnWidths();
    grid.eventProvider.assignEvents();
    setTimeout(function() {domUtilityService.RebuildGrid($scope,grid);}, 1);
}, true);

In my case I moved ng-grid library scripts after all scripts, that changed DOM tree. In other words:
with problem:

<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>
<script src="jquery.mmenu.min.all.js"></script>

fix the problem:

<script src="jquery.mmenu.min.all.js"></script>
<script type="text/javascript" src="ng-grid-2.0.7.min.js"></script>

Hopefully this will save someone else the time I spent on a work around in scenarios where this is still a problem. For me, my last column width was "*", and cutoff is not an issue, so using a wrapper div works. I was also not interested in a javascript timeout solution.

HTML:

<div class="gridWidthWrapper">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</div>

Controller:

$scope.gridOptions = {
    data: 'dataList',
    columnDefs: [{field: 'type', displayName: 'Type', width: 120},
      {field: 'description', displayName: 'Description', width: '*'}]
  };

CSS:

.gridWidthWrapper {
    width: 100%;
    overflow: hidden;
}

.gridStyle {
/* width: 100%;  --- 100% not sizing on load - using gridWidthWrapper class to obtain 100% */
  width: 2000px;
  height: 150px;
}

You are all complicated, it is not the best way to made changes into source code..

Just add to the div

data-ng-show="myData.length"

Where myData is the Grid data source, ensure data load async or set $timeout on the load data method.

I know ngGrid has a method called getPagedDataAsync, call it from JQuery document ready, some like this:

$(function(){
   getPagedDataAsync(...)
});

if you are not paging data, just call your custom data load method from JQuery document ready.

Hope it helps :)

Regards