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 Drag and Drop Panels getting placed incorrectly when there are panels of different heights

Thread ID:

Created:

Updated:

Platform:

Replies:

150686 Jan 16,2020 06:35 AM UTC Jan 31,2020 06:02 AM UTC Angular - EJ 2 2
loading
Tags: DashboardLayout
Mitesh Bajaria
Asked On January 16, 2020 06:35 AM UTC

I have a Dashboard Layout with panels of different heights. When i rearrange panels using drag and drop, the panels overlap.
I have kept cellAspectRatio as 3 in Dashboard Layout

Here is the code for it - 
<ejs-dashboardlayout id="predefine_dashboard" #predefine_dashboard [cellAspectRatio]="3" columns="6" [panels]='panelsData' [cellSpacing]='cellSpacing'>
        </ejs-dashboardlayout>
I am having following panels -
public panelsData: PanelModel[] = [{
        'sizeX': 6, 'sizeY': 4, 'row': 0, 'col': 0,
        header: '<div class="e-header-text">Header Area</div><div class="header-border"></div>',
        content: '<div class="panel-content">Content Area</div>'
    },
    {
        'sizeX': 4, 'sizeY': 3, 'row': 4, 'col': 4,
        header: '<div class="e-header-text">Header Area</div><div class="header-border"></div>',
        content: '<div class="panel-content">Content Area</div>'
    },
    {
        'sizeX': 2, 'sizeY': 3, 'row': 4, 'col': 4,
        header: '<div class="e-header-text">Header Area</div><div class="header-border"></div>',
        content: '<div class="panel-content">Content Area</div>'
    },
    {
        'sizeX': 4, 'sizeY': 3, 'row': 7, 'col': 4,
        header: '<div class="e-header-text">Header Area</div><div class="header-border"></div>',
        content: '<div class="panel-content">Content Area</div>'
    },
    {
        'sizeX': 2, 'sizeY': 3, 'row': 7, 'col': 4,
        header: '<div class="e-header-text">Header Area</div><div class="header-border"></div>',
        content: '<div class="panel-content">Content Area</div>'
    },
    ];
When i drag the panel in first row to second row then the panels below it move to the first row and overlap.


In this project if i move the panel in 1st row to 2nd row then the panels in the 2nd and 3rd row move to the 1st row and overlap each other.





Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 17, 2020 12:25 PM UTC

Hi Mitesh, 
 
Greetings from Syncfusion support. 
 
We have checked your reported issue from our end. We are able to reproduce the reported issue. We will consider this as a bug from our end.  Fix for this issue will be included in our Volume 4 SP1 Release which is expected to be released at the end of January. Please be track the below status in below link. 
 
 
Please let us know, if you have any concerns. 
 
Regards, 
Shameer Ali Baig S. 


Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]
Replied On January 31, 2020 06:02 AM UTC

Hi Mitesh, 
 
We are glad to announce that our Essential Studio 2019 Volume 4 Service Pack release v17.4.0.46 is rolled out and is available for download under the following link. 
 
 
In this release, we have included a support for “Panel overlay issue for Dashboard Layout component”. 
 
For your reference, we have prepared a simple sample. Refer the sample link below. 
 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require 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