Angular Ui-Grid Columns not showing

Question

The following webpage is a container with three different tabs: Uploaded Datasets, Bought Datasets and Integrated Datasets:

1st Tab

each tab content is a UI-Grid that I call through an angular directive as follows:

<div class="form-top">
    <nav>
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-uploaded" role="tab" aria-controls="nav-uploaded" aria-selected="true">
                Uploaded Datasets
            </a> 
            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-bought" role="tab" aria-controls="nav-bought" aria-selected="false" >
                Bought Datasets
            </a>
            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-integrated" role="tab" aria-controls="nav-integrated" aria-selected="false">
                Integrated Datasets
            </a>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-uploaded" role="tabpanel">
            <uploaded-grid></uploaded-grid>
            <!-- <div id="grid1" ui-grid="uploadedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div> -->
        </div>
        <div class="tab-pane fade" id="nav-bought" role="tabpanel">
            <bought-grid></bought-grid>
        </div>
        <div class="tab-pane fade" id="nav-integrated" role="tabpanel">
            <integrated-grid></integrated-grid>
        </div>
    </div>
</div>

and each directive contains the following Html code:

<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-exporter class="grid"></div>  

and linked with a specific controller:

var app = angular.module("integratedGridCtrl",[]);

app.controller('integratedGridCtrl', ['$http','$scope','$uibModal', function($http, $scope,$uibModal){
    var data = [
        {
            id: "Cox",
            title: "Carney",
            creationDate: "22/22/2019",
            description: "description"
        },
        {
            id: "Lorraine",
            title: "Wise",
            creationDate: "22/22/2019",
            description: "description"
        },
        {
            id: "Nancy",
            title: "Waters",
            creationDate: "22/22/2019",
            description: "description"
        }
    ];

    $scope.integratedGridOptions = {
        showGridFooter: true,
        showColumnFooter: true,
        enableFiltering: true,
        columnDefs: [
            { field: 'id', width: '*',  minWidth: 60},
            { name:  'title', field: 'title', width: '*',  minWidth: 60, displayName: 'title' },
            { field: 'creationDate', width: '*',displayName: 'creation Date',  minWidth: 60, cellFilter: 'date' },
            { field: 'description', width: '*', minWidth: 60 },             
        ],
        onRegisterApi: function(gridApi) {
            $scope.gridApi = gridApi;
        },
        rowTemplate: '<div ng-click=\"grid.appScope.detailPopup(row)\" ng-repeat=\"(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name\" class=\"ui-grid-cell\" ui-grid-cell style="cursor: pointer"></div>',
        enableGridMenu: true,
        enableSelectAll: true,
        exporterCsvFilename: 'myFile.csv',
        exporterPdfDefaultStyle: {fontSize: 9},
        exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
        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;
            },
        exporterPdfOrientation: 'portrait',
        exporterPdfPageSize: 'LETTER',
        exporterPdfMaxGridWidth: 500,
        exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
        exporterExcelFilename: 'myFile.xlsx',
        exporterExcelSheetName: 'Sheet1'
    }   
    $scope.integratedGridOptions.data = data;
 }]);

The first two tabs are well displayed, but the 3rd tab doesn't show the columns from the first click until I refresh again.

3rd Tab

Answer 1

Try ui-grid-auto-resize directive for the grid as follows:

<div id="grid2" ui-grid="integratedGridOptions" ui-grid-selection ui-grid-auto-resize 
                    ui-grid-exporter class="grid"></div>