slowness panel arrangement when browser resize

[Salvatore]

When I resize the browser window, the repositioning of the panels takes a long time to finish showing a slow motion effect in the operation. Is there a way to remove any animation effects that might produce such behavior?

thank you

[Muthukumar Settu]

Hi Salvatore, 

Greetings from Syncfusion support.  

 

We have checked your requirement with Dashboard Layout component. We suggest you to use transition style as none in sample level for below classes.

Please, refer to the below code snippet. 

@using Syncfusion.Blazor.Layouts 

 

<SfDashboardLayout CellSpacing="@(new double[]{10 ,10 })" Columns="5"> 

    <DashboardLayoutPanels> 

        <DashboardLayoutPanel> 

            <HeaderTemplate><div>Panel 0</div></HeaderTemplate> 

            <ContentTemplate><div>Panel Content</div></ContentTemplate> 

        </DashboardLayoutPanel> 

        <DashboardLayoutPanel SizeX=2 SizeY=2 Column=1> 

            <HeaderTemplate><div>Panel 1</div></HeaderTemplate> 

            <ContentTemplate><div>Panel Content</div></ContentTemplate> 

        </DashboardLayoutPanel> 

        <DashboardLayoutPanel SizeY=2 Column=3> 

            <HeaderTemplate><div>Panel 2</div></HeaderTemplate> 

            <ContentTemplate><div>Panel Content</div></ContentTemplate> 

        </DashboardLayoutPanel> 

        <DashboardLayoutPanel Row=1> 

            <HeaderTemplate><div>Panel 3</div></HeaderTemplate> 

            <ContentTemplate><div>Panel Content</div></ContentTemplate> 

        </DashboardLayoutPanel> 

    </DashboardLayoutPanels> 

    <DashboardLayoutEvents OnDragStart="@Start" OnDragStop="@Stop"></DashboardLayoutEvents> 

</SfDashboardLayout> 

 

@code{ 

    string transition = "none"; 

    public void Start(DragStartArgs args) 

    { 

        transition = "top .5s, left .5s"; 

    } 

 

    public void Stop(DragStopArgs args) 

    { 

        transition = "none"; 

    } 

 

} 

<style> 

 

    .e-dashboardlayout.e-control .e-panel.e-panel-transition { 

        transition: @transition; 

    } 

 

    .e-panel-header { 

        background-color: rgba(0, 0, 0, .1); 

        text-align: center; 

    } 

 

    .e-panel-content { 

        text-align: center; 

        margin-top: 10px; 

    } 

</style> 

 

Please, refer to the sample link below. 

https://www.syncfusion.com/downloads/support/forum/161211/ze/Dashboard_PageResize_SlowSample1859642176.zip 

 

Please, refer the below links for more details on Dashboard Layout component. 

 

UG Documentation- https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started/ 

 

Demo link- https://blazor.syncfusion.com/demos/dashboard-layout/default?theme=bootstrap4 

 

Please let us know, if you need any further assistance. 

Regards, 

Muthukumar S  

[Salvatore]

Hi, unfortunately nothing has changed since your suggestion.

I look forward to other suggestions.

thanks

[Muthukumar Settu]

Hi Salvatore,  

We have validated the reported issue in our end and modified the sample to showcase the difference. In home page, we have sample with workaround and counter page has default DashboardLayout component(without workaround). We have recorded a video with difference in transition for your reference. Please, refer to the video link below.

https://www.syncfusion.com/downloads/support/forum/161211/ze/ScreenCapture_08-01-2021_12.31.031307050440.zip 

Please, refer to the below sample link. 

https://www.syncfusion.com/downloads/support/forum/161211/ze/Dashboard_Resize_Sample-1583532748.zip 

Please apply the solution in your end and  if issue persists, share a video footage to represent the issue else modify the above sample to replicate the issue. This will help us to validate the issue and assist you promptly. 

Please let us know, if you need any further assistance.  

Regards
Muthukumar S 

[Salvatore]

Hi,

I believe that the problem is not of control but of content in each

DashboardLayoutPanel. I noticed that the use of "complex" controls such as Sfgrid, SfListview, slow down the application a lot and in fact replacing, for example, a SfListView with a combination of <ul><il>...<il> </ul> the problems disappear.

This behavior is present everywhere especially if you use more or less complex content inside the Sf *** controls.

Maybe I'm wrong (I wish it were so) but this is the feeling.

I await your welcome suggestions

Greetings

[Sharon Sanchez Selvaraj]

Hi Salvatore, 

 

We checked with your reported issue, but we were unable to replicate it. We have attached a sample here for your reference. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dashboard_Resize_SlowSample-290852788.zip 

 

Please find the sample video: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dashboardwithgrid-281997421   

 

The above sample has ListView and Grid controls. On resizing the browser, we don’t experience any delay in our end. Can you please provide the details  on the following to assist you promptly. 

 

1. Browser and package version used.
2. List of components used in your application ?
3. Code snippet of DashboardLayout used in your application or video recording on the issue.
4. If possible, please modify the above sample to produce the issue.

 

Regards,

Sharon Sanchez S.