Unexpected behaviour when adding panels in dashboard component

Question

Hi, we found an unexpected behaviour when adding a new panel to the dashboard component in angular. We are adding panels at position 0,0 dynamically but the other panels that are added they are moving down not right (only the first time is added to the right).

This can be reproduced in demo of the documentation of the dashboard: https://ej2.syncfusion.com/angular/documentation/dashboard-layout/panels/add-remove-panels

Attached to this ticket is some screenshots of the demo mentioned:

- In Dashboard_1 image a panel was added to an empty panel.

- In Dashbaord_2 the 14 panel was added and the 13 panel added before moves to the right ( this is correct)

-In Dashboard_3 the 15 panel was added and the 14 panel (at position 0,0) moves down (this is the unexpected behaviour, we expect that everything moves right).

Is there a way to modify this behaviour? or is a bug?

We expect that all the panels move right when adding a new one at position 0,0 if there is not enought width then could be moved down.

Thanks

Attachment: Dashboard_77c95d11.zip

LeoLavanya Dhanaraj · Answer

Hi Cesar,Greetings from Syncfusion support.We would like to inform you that this is the structure of
our Dashboard Layout component for adding panels. For reference, we have
included a sample to demonstrate the behavior of adding panels. When a new panel is added to the Dashboard Layout, it will first
check if the right side of the new panel position is empty or not. If the right
side of the new panel position is empty, it will move the existing panel to the
right position. If the panel is already in its right position of new panel, it
will move the existing panel to the bottom.Check out the below sample and video footage for you
reference.Sample : https://stackblitz.com/edit/angular-6dtz5u-4vvxey?file=src%2Fapp.component.html,src%2Fapp.component.tsPlease get back to us if you need any further assistance.Regards,Leo Lavanya DhanarajAttachment: Dashboard_f0969195.zip

Cesar Smerling · Answer

Hi, I don't understand it. In the pictures I send I add 3 panels (the same behaviour is happening on your example):

1 - Click Add Panel -> panel 1 is added at 0,0

2 - Click Add Panel -> panel 1 is moving right and then panel 2 is added at 0,0

3 - Click Add Panel -> panel 2 is moving down and the panel 3 is added at 0,0

Then all the next panel added move down the panel

I don't understand why case 2 and 3 are different, that is this miss behaviour for our end users, seems bad UX for me because the behaviour is different for the same action.

But if there is not way to override this this should be marked as a bug.

Thanks for the feedback.

LeoLavanya Dhanaraj · Answer

Hi Cesar,Thanks for your patience.As explained in our previous update, this is the current behavior
of our Dashboard Layout component. When a new panel is added to the Dashboard
Layout, it will first check if the immediate right side of the new panel
position is empty or not. Based on that, it will render the new panel. We have
implemented this behavior with consideration of the floating functionality in
the Dashboard Layout component, which is used to effectively utilize the entire
layout for the panel's placement.Check out the below links to know more about our floating
functionality in the Dashboard Layout component.Documentation : https://ej2.syncfusion.com/angular/documentation/dashboard-layout/floating-of-panelsAPI demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/dashboard-layout/propertiesAPI
reference : https://ej2.syncfusion.com/angular/documentation/api/dashboard-layout#allowfloating