Load grid in mat-tab

[Willemin]

Hello,

I have a problem loading the grid with the use of mat-tabs.
When the grid is outside a mat-tab, or in the first position then it is loaded and displayed correctly. But when the grid is in a mat-tab in second position for example, it is not loaded.

In the attached project there is the problem (woAngular 14).
How can I make it load?

Thanks in advance for your help

Tom

Attachment: test_c8054e55.zip

[Rajapandiyan Settu]

Hi Willemin, 

Thanks for contacting 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 render 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.  

 

[app.component.html]

 

<mat-tab-group #matTab color="accent" (selectedTabChange)="onTabClick($event)">

  <mat-tab label="Test">

    <p>Hello</p>

  </mat-tab>

  <mat-tab label="Users">

        <ejs-grid #userGrid *ngIf="isGridReady"

                  [dataSource]='dataSource'

                  rowHeight='30'

                  [allowResizing]='true'

                  [allowPaging]='true'

                  [allowFiltering]='true'

                  [allowSorting]='true'>

        </ejs-grid>

  </mat-tab>

</mat-tab-group>

 

[app.component.ts]

 

export class AppComponent {

 

public isGridReady: boolean = false;

dataSource: Entity[];

 

constructor() {

  this.dataSource = this.getEntities();

}

  onTabClick(args:any){

    if(args.index == 1){

      this.isGridReady = true  // make the flag variable as true

    }

  }

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/test_angular14_grid_mattab_resolved-1229423456.zip

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

Regards, 

Rajapandiyan S