Resize content when tile is resized

[mikanyg]

I cannot find any documentation on how to resize content when a dashboard tile is resized. 

This resizing demo shows it can be done, but there is no source code the demo.

I am currently unable to figure out how to bind to events related to resizing of dashboard tiles, since I want to trigger StateChanged on child components in the tiles content templates.

Looking at the Blazor API reference I can see that class DashboardLayoutModel has a event property called ResizeStop, but the component class SfDashBoardLayout does not. 

How do the two classes relate? 

How do I bind to resize events of the DashboardLayout component?

How do I get tile content to auto-resize when tile is resized as shown in the demo?

[mikanyg]

Ok, found a solution for hooking up the events using

<SfDashboardLayout>

    <DashboardLayoutEvents OnResizeStop="Refresh"></DashboardLayoutEvents>

</SfDashboardLayout>

but I am still unable to get the result as shown in the resizing demo. Help is much appriciated.

[Sowmiya Padmanaban]

Hi mikanyg,  

 

Greetings from Syncfusion support. 

 

Query 1- How do I get tile content to auto-resize when tile is resized as shown in the demo  & How do I bind to resize events of the DashboardLayout component? 

 

We have checked your reported problem “DashboardLayout component’s panel content not adapts within panels on resize”. By default, in DashboardLayout component, we have not handled the panel content element’s resizing functionality in component level. Since, content within the panels will vary based on the different user’s need and it might be any HTML elements regardless of Syncfusion controls. We cannot determine the content inside the dashboard panels and their respective configurations. So, we have no in-built functionality in Dashboard Layout to handle the content inside the panels.   

  

To resolve your reported problem, you have to refresh the component inside the dashboard panels (For example: Gauge) in DashboardLayout’s OnResizeStop event.   

 

@using Syncfusion.Blazor.Layouts 

@using Syncfusion.Blazor.CircularGauge 

 

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

    <DashboardLayoutEvents OnResizeStop="ResizeStop"></DashboardLayoutEvents> 

    <DashboardLayoutPanels> 

        <DashboardLayoutPanel>   

            <HeaderTemplate><div>Circular Gauge</div></HeaderTemplate> 

            <ContentTemplate>               

                    <SfCircularGauge @ref="circular_gauge" Height="100%" Width="100%"> 

                        <CircularGaugeAxes> 

                            <CircularGaugeAxis Background="rgba(0, 128, 128, 0.3)"> 

                                <CircularGaugeAxisLineStyle Width="2" Color="red"> 

                                </CircularGaugeAxisLineStyle> 

                            </CircularGaugeAxis> 

                        </CircularGaugeAxes> 

                    </SfCircularGauge>                    

            </ContentTemplate> 

        </DashboardLayoutPanel>    

    </DashboardLayoutPanels> 

</SfDashboardLayout> 

@code{ 

    SfCircularGauge circular_gauge; 

    public void ResizeStop(Syncfusion.Blazor.Layouts.ResizeArgs args) 

    { 

        this.circular_gauge.Refresh(); 

    } 

} 

<style>   

    .e-circulargauge { 

        width:inherit; 

        height:inherit; 

    } 

</style> 

 

You can find the DashboardLayout event in Dashboard events tag. 

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1045466477.zip 

 

We have provided resize events for DashboardLayout component. Refer the below resize events.  

  

OnResizeStart - Triggers when a panel is about to resize.  

  

OnResizeStop -Triggers when a panel resize ends.  

  

Resizing -Triggers when a panel is being resized continuously.  

  

Refer to the below link to know more about the DashboardLayout events.  

  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html  

  

To know more about the DashboardLayout component, refer the below links.  

  

UG documentation-https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started/#panels-with-components  

  

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

  

API reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.IDashboardLayout.html  

  

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

 

 

Regards,  

Sowmiya.P 

[mikanyg]

Thank you

I managed to get it to work based on your sample.

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Mikael, 

 

We are happy to hear that your issue has been resolved. Please contact us if you need any further assistance. We will be happy to help you. 

 

Regards, 

Shameer Ali Baig S. 

[Geraud Bertrand]

If I have multiple Panel in the dashboard, how can I know which one to refresh ?

[Keerthana Rajendran]

Hi Geraud, 

 

You can refresh the specific component(For ex: Chart, Gauge) within panels using the Refresh method of corresponding components. Else, you need to refresh the entire Dashboard Layout using RefreshAsync method. 

 

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_RefreshAsync 

 

Please let us know if any concerns. 

 

Regards, 

Keerthana R.