Dashboard Layout Drag and Drop Panels getting placed incorrectly when there are panels of different heights

[Mitesh Bajaria]

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.

Here is the project link - https://stackblitz.com/edit/angular-xfccub

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]

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. 

 

https://www.syncfusion.com/feedback/11334/dashboard-layout-panel-overlap-issue 

 

Please let us know, if you have any concerns. 

 

Regards, 

Shameer Ali Baig S. 

[Shameer Ali Baig Sulaiman Ali Baig]

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. 

 

https://www.syncfusion.com/forums/151087/essential-studio-2019-volume-4-service-pack-release-v17-4-0-46-is-available-for-download 

 

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. 

 

https://stackblitz.com/edit/angular-zh53pm?file=app.component.ts  

 

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.