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

Subscribe to this post

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

Reply | Reply with quote

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.

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.

Reply | Reply with quote

CONTACT US

Dashboard Layout resize while parent div resize(responsive)

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US