Grid height is wrong calculated inside mat-tab

[Benjamim Goulart Bessa]

Olá

I built a form with a mat-tab control (Angular Material), with two tabs. Inside each tab I have an ejs-grid with the height property setted to 100%.

In first tab, wich is loaded first, the ejs-grid set, correctly, the value "height: calc(100% - 32px)" to the style property of div with class "e-gridcontent", but in the second tab, when is activated, the ejs-grid set "height: calc(100% - 0)" to the style property of div with class "e-gridcontent", so my ejs-grid overflow the current content and grow 32px more than necessary, wich represents the height of grid header.

Would you help me to work around this issue? 

Thanks

Benjamim Bessa

[Rajapandiyan Settu]

Hi Benjamim,  

Greetings from Syncfusion support. 

 

We have validated the reported problem and we are able to reproduce the reported behavior at our end too. The mentioned issue is reproduced when the grid is not rendered properly when the DOM Element is not active. (i.e. In Mat-Tab control, at initial rendering the first tab is in active state and other tabs are in inactive state). If you rendering Grid in second tab (which is in inactive state), the Grid is not rendered properly.   

  

So, we would like to suggest you to render the Grid in the “selectedTabChange” event of Mat-Tab component to resolve the reported behavior. The grid renders properly when the DOM element is in active state.  

 

We have used *ngIf condition to render the Grid control in second tab. In the selectedTabChange event, we changed the condition as true and the Grid will be rendered properly in DOM. Refer to the below code example and sample for more information.   

  

<mat-tab-group (selectedTabChange)="onTabClick($event)"> 

  <mat-tab label="Tab 1"> 

    <div class="gridParent"> 

      <ejs-grid [dataSource]="data" height="100%"> 

        -------- 

      </ejs-grid> 

    </div> 

  </mat-tab> 

  <mat-tab label="Tab 2" 

    ><div *ngIf="flag" class="gridParent"> 

      <ejs-grid [dataSource]="data" height="100%"> 

          ------- 

      </ejs-grid></div 

  ></mat-tab> 

</mat-tab-group> 

export class TabsOverviewExample { 

  public data: Object[] = []; 

  public flag: boolean = false; 

 

  ngOnInit(): void { 

    this.data = orderDetails; 

  } 

  onTabClick(event) { 

    this.flag = true; 

  } 

} 

  

  

Please get back to us if you need further assistance with this. 

Regards,  

Rajapandiyan S 

[Benjamim Goulart Bessa]

Thank's Rajapandiyan, works like a charm!!!!!

[Rajapandiyan Settu]

Hi Benjamim, 

We are glad that the provided solution resolved your requirement. 

Regards, 

Rajapandiyan S