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
