Panels move upon mouse hover and panel content update

Ian Davies

Asked On October 23, 2019 11:20 AM UTC

Hi,

I am using the Dashboard layout with the following configuration:

- 40 columns width

- Aspect ration of 100/60

- cell spacing of 10, 10

- resize handles of new string[] { "e-south-east", "e-east", "e-west", "e-south-west", "e-south" };

- Panels with the following settings

Panel	Width	Height	row	column
Label01	5	5	0	0
chart01	34	11	0	5
label02	5	5	7	0
StackedIcon	10	5	15	0
Table01	13	6	15	11
Table02	13	6	15	24

The code with the above settings in the model is:

@Html.EJS().DashboardLayout("dashLayout").Columns(Model.Columns).CellSpacing(Model.CellSpacing).ResizableHandles(Model.ReszieHandles).AllowResizing(true).Panels(Panel=>

{

List<int> pnlKeyList = Model.Panels.Keys.ToList();

for (int PnlCnt = Model.Panels.Count-1; PnlCnt >= 0; PnlCnt--)

{

DashboardLayoutPanel pnl = Model.Panels[pnlKeyList[PnlCnt]];

Panel.SizeX(pnl.SizeX).SizeY(pnl.SizeY).Row(pnl.Row).Col(pnl.Col).Content(pnl.Content).Header("<p>" + pnl.Header + "</p>").Add();

}

}).Render()

The dashboard renders okay (see below picture) but the panels on mouse hover on any panel or on a content update via Ajax of a panel content, the whole display jumps vertically up or down. What is causing this and how can I prevent it?

Thanks in advance.

Regards

Ian

Reply | Reply with quote

Keerthana Rajendran [Syncfusion]

Replied On October 24, 2019 11:35 AM UTC

Hi Ian Davies,

Thanks for contacting Syncfusion support.

We have checked your reported query that panel jumps vertically up and down. We are not able to reproduce the issue from our end. For your reference, we have prepared a dashboard layout sample. In that sample, we have updated the panel content using ajax request.

Refer the sample link below.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication12068775938.zip

If we misunderstand your requirement. Can you please share the additional details regarding your requirement? It will helpful for us to resolve your issue at the earliest.

1. Package version being used in your application

2. Check whether the panel content moves vertically due to animation effect or the entire panel element moves.

3. Have you refreshed or changed the panels property dynamically after updating the content of the panel?

4. Issue reproducing sample (if possible).

Please let us know, if you have any concerns.

Regards,

Keerthana.

Reply | Reply with quote

Ian Davies

Replied On October 26, 2019 11:04 AM UTC

Hi Keerthana,

I have managed to adapt the sample you have provided to replicate the behaviour could you please take a look (this was done in VS 2019), please note to replicate you need to normally collapse and expand the side menu bar at least once as per the comment I have made in the index.cshtml page - it seems to be related to if there is any spare space on the page but I would think it still should not do it:

<!-- If this button is here it does not jump panels - if removed on mouse focurs it does - open and collapse the menu at least once and it will do it on mouse hover of a panel

Html.EJS().Button("add").CssClass("e-primary").Content("Update Content").Render()

</div>

-->

Please note to fit it into the max file size I have had to do remove the packages as per the sample sent before.

Thanks in advance.

Ian.

Attachment: WebApplication12068775938_(2)_71e1dd7d.zip

Reply | Reply with quote

Shameer Ali Baig Sulaiman Ali Baig [Syncfusion]

Replied On October 28, 2019 11:32 AM UTC

Hi Ian,

A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/Account/Logon?ReturnUrl=/support/directtrac

Regards,

Shameer Ali Baig S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148514	Oct 23,2019 11:20 AM UTC	Oct 28,2019 11:32 AM UTC	ASP.NET MVC - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US