Dashboard layout not rendering into the Tab control

Problem description

The dashboard layout is not rendering any tab item, which does not remain open at the initial time while rendering the Tab component.

Solution description

In the dashboard layout, the panel element's dimension is calculated based on the parent element's dimension. In the Tab, the height and width will be set only for the tab item that stays open on initialization, while all the other tab items will remain hidden (displayed as none). Therefore, those tabs will have a height and width of 0 (zero).

Due to this, the dashboard layout will not pre-calculate the dimension of its parent element initially, as it remains 0 until you switch to the tab item. This is the reason for facing this problem with the dashboard layout.

To overcome this problem, we suggest you set the height and width to 100% for the parent element (active tab item) and refresh the dashboard layout component in the Selected event of the tab component.

Refer to the code snippet to refresh the dashboard layout:

<ejs-tab id="tab_default" heightAdjustMode='Auto' [showCloseButton]='enableClose' (selected)="onSelect($event)">
        <e-tabitems>
            <e-tabitem [header]='headerText[0]' content="#idv1">
            </e-tabitem>
            <e-tabitem [header]='headerText[4]' content="#idv5">
            </e-tabitem>
        </e-tabitems>
</ejs-tab>
 
<div id="idv5" style="display:none">
        <dashboard-root style="display:block;height:100%"></dashboard-root>
</div>
 
onSelect(args) {
      // Refresh the dashboard layout.
      if(args.selectedIndex == 4) {
            this.DashboardComponent.Dashboard.refresh();
     }
}

Refer to the working sample for additional details and implementation: Sample