The panels will collapse when the data is refresh

[Yvonne]

Hi, I am developing an application that using the dashboard component inside the tab component. When I choose the new data source for the dashboard component, all the panels will collapse, and the chart inside the panel will also become weird. For example,

Before choose new data source:

Tab 1:

Tab2:

After choose new data source:

Tab1:

Tab 2:

[Indhumathy Loganathan]

Hi Loh yee wen, 

 

Greetings from Syncfusion support. 

 

From the shared details, we understood that you are dynamically updating the Chart content inside the Dashboard Layout panel. Similar to your sample, we rendered panel inside Tab component and updated the Chart dataSource. But we are unable to recreate the reported issue at our end. Please find the sample from below link. 

 

https://stackblitz.com/edit/react-rucgsc?file=index.js 

 

We suggest you to check the above sample and confirm whether you have performed same kind of customizations. If not, share the complete code snippets to replicate the issue. If possible, replicate the issue in the above shared sample to assist you promptly. 

 

Regards, 

Indhumathy L 

[Yvonne]

I try to make the same issues in the below link. The steps to make the issues:

1. You need to drag the splitter first
2. Go to tab 2 and click the 'ChangeDataSouece' button
3. Go to tab 1, the chart will not in the dashboard

https://stackblitz.com/edit/react-rucgsc-j7byou?file=index.js

[Indhumathy Loganathan]

Hi Loh yee wen, 

 

From the shared sample and steps, we understood the exact issue. You can prevent the panels overlapping issue just by setting the height and width of both component and parent container as 100%. Please check the below code snippet. 

 

return ( 

  <div 

    className="template" 

    style={{ 

      height: '100%', 

      width: '100%', 

    }}> 

    <HeatMapComponent 

      id="heatmap-container" 

      style={{ 

        height: '100%', 

        width: '100%', 

      }} 

 

Also, you can avoid the content shrinking issue by refreshing the updated component in Tab selected event. Check the below code snippet. 

 

  function selected(args) { 

    var heatmap =  document.getElementById('heatmap-container').ej2_instances[0]; 

    heatmap.refresh(); 

  } 

 

You can find the sample from below link. 

 

https://stackblitz.com/edit/react-rucgsc-5c5hnw?file=index.js 

 

Please check the sample and let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Yvonne]

I try to set the height and width of both component and parent container as 100%, but the panels is still overlapping.Probably because I used the sidebar component with the dashboard component, so it will always have this issues.

The steps to make this issues:

1. Go to Tab2
2. Back to Tab1
3. Change the data source
4. Drag the splitter

And I can avoid the content shrinking issue by updating the component in Tab selected event. Thank you so much!!

[Indhumathy Loganathan]

Hi Loh yee wen, 

 

Most welcome. 

 

We have modified the sample with the Sidebar component and followed the mentioned steps, but we are unable to recreate the panels overlapping issue at our end. Please refer to the sample link below. 

 

https://stackblitz.com/edit/react-rucgsc-esqc8x?file=index.js 

 

We have recorded the steps in the below video footage for your reference. 

 

https://www.syncfusion.com/downloads/support/forum/171595/ze/VideoRecording-1913046329 

 

Since we are unable to replicate the issue at our end, we request you to share the below details. 

 

1.      Do you face this issue in our shared sample as well? 

 

2.      If possible, replicate the issue in the above shared sample to serve you better. 

 

Regards, 

Indhumathy L 

[Yvonne]

Actually, in my project, the both tabs have the dashboard layout. So it may have more problems. But I just solve it by refreshing the dashboard layout. Thank you for your helping

[Keerthana Rajendran]

Hi Loh Yee, 

Most welcome. We are happy to hear that the issue is resolved. Please get back to us if you need any further assistance. 

Regards, 

Keerthana R.