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

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