ui-grid columns collapsing when width:"**" is specified - angularjs

Question

I am working on a project where I have used UI-Grid to show list of users. I have specified width:"**" for each column in column definition. In output, all the columns are collapsed in left side. When I resizes browser window or inspects element, then width is auto adjusted quickly. But for first time, all columns are displayed collapsed. Here is my code:
$scope.columns = [
{ field: 'name', name:'Name', width: "**", cellTooltip : false,enablePinning:true,
cellTemplate:'<div class="ui-grid-cell-contents">'+
'<a ng-href="#/account/profile?id={$ grid.appScope.getUserID(grid, row) $}"> {$ grid.appScope.getUserRow(grid, row,"uname") $} </a>'+
'</div>'
},
{ field: 'email', name:'Email', width: "**", cellTooltip : false,enablePinning:true },
{ field: 'role', name:'Role', width: "**", enableSorting: true,
cellTemplate:'<div class="ui-grid-cell-contents"> '+
'{$ grid.appScope.getUserRow(grid, row,"role") $}'+
'<a ng-click="grid.appScope.assignRole({$ grid.appScope.getUserID(grid, row) $})"> add </a>'+
'</div>'
},
{ field: 'isInvited', name:'Invitation status', width: "**", cellTooltip : false,enablePinning:true },
];
$scope.gridOptions = {
showGridFooter: true,
enableSorting: true,
enableGridMenu: true,
enableSelectAll: true,
enableFiltering: true,
enableHorizontalScrollbar : 1,
paginationPageSizes: [10,25, 50, 100],
useExternalPagination: true,
columnDefs: $scope.columns,
enableGridMenu: true,
enableSelectAll: true,
exporterCsvFilename: 'myFile.csv',
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [10, 10, 10, 10]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfHeader: { text: "My Header", style: 'headerStyle' },
exporterPdfFooter: function ( currentPage, pageCount ) {
return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
},
exporterPdfCustomFormatter: function ( docDefinition ) {
docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
return docDefinition;
},
exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged( $scope, function( grid, sort ) {
$scope.gridApi.core.notifyDataChange( uiGridConstants.dataChange.COLUMN );
});
$scope.gridApi.pagination.on.paginationChanged( $scope, function( currentPage, pageSize){
$scope.getAppDetails(currentPage, pageSize);
});
}
};

Answer 1

I just noticed if you resize the window it renders the grid properly. So a quick and dirty work around and not really intended as a solution, is watching for when the grid becomes visible and calling grid.handleWindowResize() on the gridApi.
Also a $timeout to ensure the rendering is performed after the tab has fully displayed. Here's how I watch:
$scope.test = {isActive: false};
$scope.$watch('test.isActive', function (active, oldActive) {
if(active) {
$timeout(function () {
$scope.gridApi.grid.handleWindowResize();
});
}
});