angular - Warning 'grid zero width' when using ag-Grid's sizeColumnsToFit() on two separate ag-Grids?

0
votes

I have a problem with ag-grid, I am getting in the console this warning, I did some research but none of them solve my problem, and I don't know what is wrong with my code, from angular material I understood was a memory leak in mine application, but I don't get it.

ag-Grid: tried to call sizeColumnsToFit() but the grid is coming back with zero width, maybe the grid is not visible yet on the screen?

Please,

if you have an idea how to fix, or if something is wrong in my code I would really appreciate even the smallest help.

What I tried :

@HostListener('window:resize')
onResize() {
  if (!this.gridApi) return;

  setTimeout(() => {
    this.gridApi.sizeColumnsToFit();
  });
}

this one :

 afterGridReady() {
    if (this.language === 'en') {
      this.appgrid.columnApi.setColumnsVisible(['name'], true);
      this.appgrid.columnApi.setColumnsVisible(['nameCZ'], false);
    } else {
      this.appgrid.columnApi.setColumnsVisible(['nameCZ'], true);
      this.appgrid.columnApi.setColumnsVisible(['name'], false);
    }
    this.api.sizeColumnsToFit();
    window.addEventListener('resize', function () {
      setTimeout(function () {
        this.api.sizeColumnsToFit();
      });
    });
  }

Thank you in advance.

2
angulartypescript

2 Answers

0
votes

You can use the selectChange event provided by . It fires when a tab selection is changed. From the documentation:

@Output() selectChange : Event emitted when the tab selection has changed.

In your template:

<md-tab-group (selectChange)="tabSelectionChanged($event)">
  <md-tab label="Tab 1">Content 1</md-tab>
  <md-tab label="Tab 2">
    This tab will load some morecontents after 5 seconds.
    <p>{{ moreContents }}</p>
  </md-tab>
</md-tab-group>
... and in your typescript code:

tabSelectionChanged(event){
    // Get the selected tab
    let selectedTab = event.tab;
    console.log(selectedTab);

    // Call some method that you want 
    this.someMethod();
}
-1
votes

this is working code.

//component.html

 <mat-tab-group (selectedTabChange)="selectedTabChange($event)">
            <mat-tab label="Letter Template">
                 <div class="ag-grid-full-height">
                     <ag-grid-angular style="width: 100%;height:100%" id="myGrid" class="ag-theme-balham"
                        [pagination]="true" [columnDefs]="columnDefs" [rowData]="rowData" [animateRows]="true"
                        [sideBar]="sideBar" (gridReady)="onGridReady($event)" [suppressMenuHide]="true">
                    </ag-grid-angular>
                </div>
            </mat-tab>

            <mat-tab label="Template Gallery">
                <app-template-gallery *ngIf="seletedTab"></app-template-gallery>
            </mat-tab>

            <!-- //if you have more than 2 tabs use bellow approch. -->
            
            <!-- <mat-tab label="Template Gallery">
                <app-template-gallery *ngIf="seletedTab =='Template Gallery'"></app-template-gallery>
            </mat-tab> -->
            <!-- <mat-tab label="Template FRT">
                <app-template-gallery *ngIf="seletedTab=='Template FRT'"></app-template-gallery>
            </mat-tab> -->

        </mat-tab-group>
        
        
   //component.ts     
   seletedTab;

  selectedTabChange(event) {
    let tab = event.tab;
    console.log("tab seleted", tab);
    this.seletedTab = tab.textLabel;
  }