Issue loading grid data when two grids are on angular material tabs

[eric]

• I have a page with an angular material tab control. 
  • The page has two tabs and each tab has a one Syncfusion grid.
  • Both Syncfusion grids have a few columns that are frozen to the left.
  • FYI. Both Syncfusion grids work fine if there is no tab control on the page.
    
• The first tab loads the SyncFusion grid correctly.
• When the user navigates to the second tab the SyncFusion grid only displays the data for the frozen columns. All other columns incorrectly show no values.
• If the user then filters/sorts/pages the second SyncFusion grid will display the data correctly.
• If I turn off freezing on the second tab the SyncFusion grid displays data correctly.
  
  
  

Is this a bug? Or how can I get this to work with the column freezing being on?

Attachment: captures_e688024a.zip

[Dineshnarasimman Muthu]

Hi Eric,

Greetings from Syncfusion Support.

Query: Issue loading grid data when two grids are on angular material tabs

We have analyzed your query about having issue in rendering grid when using material tab and freeze column. We have validated your requirement and we cannot replicate the issue you have face. We have attached a stackblitz sample for your reference.

Sample: https://stackblitz.com/edit/angular-fxbzp7-vohmjm?file=app.component.ts

Can you please share the following details which will be helpful for us to identify the issue and give a better solution.

• Share the full Grid code example.
• Share the model dataSource for the Grid component.
• Syncfusion Grid Package version.
• Share an issue reproducible sample which will be easier to validate the issue.

Regards,

Dineshnarasimman

[eric]

I have updated the stackblitz you provided here:

https://angular-fxbzp7-ywlqcd.stackblitz.io
https://stackblitz.com/edit/angular-fxbzp7-ywlqcd?file=app.component.html

1. Click on the first url. 
2. Click on "Load Data" that appears at the top of the page. 
3. Click on "Second" tab.
4. Tab 2 loads but the data is all misalligned and when you sort a column the data corrects itself.
   

I could not reproduce the exact issue...but I could reproduce a very similar issue where until you resort the second tab the data is incorrect.

[Dineshnarasimman Muthu]

Hi Eric,

Query: The data is all misaligned when switching tabs and when you sort a column the data corrects itself.

We have analyzed your query about the data misalignment when tabs are switching in material tab. We have validated your query and we suggest you to use freezeRefresh() method on the grid in the selectTabChange event of the mat-tab-group tag to achieve your requirement. We have attached the code snippet and a sample for your reference.

App.component.html

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

 

App.component.ts

 

  TabChange(e: any):void

  {

    this.transactionGrid.freezeRefresh();

    this.distributionGrid.freezeRefresh();

  }

 

 

Sample: https://stackblitz.com/edit/angular-fxbzp7-ypfhjc?file=app.component.html,app.component.ts,app.component.css

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman

[eric]

Your solution works. Thank you.

[Suganya Gopinath]

Hi Eric, 

We are glad that the solution provided worked. Please get back to us for further assistance.

We are marking this thread as solved.