We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Dashboard Layout resize while parent div resize(responsive)

Thread ID:

Created:

Updated:

Platform:

Replies:

150293 Dec 31,2019 09:33 AM UTC Jan 2,2020 08:50 AM UTC Angular - EJ 2 1
loading
Tags: DashboardLayout
Samba Shiva Rao Enuganti
Asked On December 31, 2019 09:33 AM UTC

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 [Syncfusion]
Replied On January 2, 2020 08:50 AM UTC

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. 


Please let us know, if you need any further assistance. 
  
Regards, 
Shameer Ali Baig S.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon