Dashboard Layout resize while parent div resize(responsive)

[Samba Shiva Rao Enuganti]

Hi Team,

I am using Dashboard Layout in Child component(Angular 8) and I have parent component with  Sidebar on left with Type as push.

When I am loading the page Sidebar will be in Open state, Dashboard Layout loading in remaining full screen, but when sidebar closed Dashboard Layout not utilizing full available space.

How can achieve this functionality, I have tried updatepanel & resizepanel methods, but nothing worked out.

Could you please provide some sample or code snippet to resolve the issue.

Thanks,

Shiva 

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Shiva, 

 

Greetings from Syncfusion support. 

 

We have checked your reported query that Dashboard Layout is not aligned properly during sidebar open and close. To achieve your requirement, you have to adjust the width of dashboard layout component during open and close of sidebar element using its open() and change() events. 

Refer the below code snippet for achieving your requirement. 

 <ejs-sidebar id="sidebar-treeview" class="dock-menu" #sidebarTreeviewInstance [width]='width' 

                    [mediaQuery]='mediaQuery' [target]='target' (open)="onOpen($event)" (change)="onChange($event)"> 

 </ejs-sidebar> 

    onOpen(){ 

      if(!Browser.isDevice) { 

      let parentElement : HTMLElement = document.getElementById("dashboardParent"); 

      // 290 px is the width of the sidebar element. 

      parentElement.style.width = "calc(100% - 290px)" 

      } 

    } 

    onChange(){ 

      if(!Browser.isDevice) { 

      let parentElement : HTMLElement = document.getElementById("dashboardParent"); 

      parentElement.style.width = "100%"; 

      this.dashboard.refresh(); 

      } 

    } 

  

For your reference, we have prepared a simple sample to achieve your requirement. Refer the sample link below. 

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

Please let us know, if you need any further assistance. 

  

Regards, 

Shameer Ali Baig S.