Refresh dashboard panel when resized

[Yongkee Cho]

Hi,

I wonder how to refresh each chart in panel is resized when the dashboard layout panel is resized.

Cannot convert ResizeArgs.Element to SfChart to refresh.

The whole dashboard refresh does not resize each panel.

private async Task ResizingHandler(Syncfusion.Blazor.Layouts.ResizeArgs args)
{
        await Task.Delay(500);
        await _dashboardLayout.RefreshAsync();
}

The CSS below doesn't do magic as well.

<style>
    .e-chart {
        height: inherit !important;
    }
</style>
​

[LeoLavanya Dhanaraj]

Hi Yongkee,

Greetings from Syncfusion support.

Based on the details you shared, we have validated the query you mentioned (resizing chart based on e-panel resize in Dashboard) in the Dashboard Layout component. This issue occurs due to the panel and its content not being refreshed properly. To fulfill your requirement, we suggest refreshing the content(Chart component) of the Dashboard panel using its instance within the OnResizeStop event.

Refer to the sample below, documentation and the provided code snippets for additional assistance. In the below sample, we have refreshed the chart component inside the OnAfterRenderAsync method.

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

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

    <DashboardLayoutPanels>

        <DashboardLayoutPanel Id="Panel1" SizeX="2" SizeY="2">

            <HeaderTemplate><div class='header'> Customers Count </div></HeaderTemplate>

            <ContentTemplate>

                <div style="height:100%; width:100%;">

                    <SfChart ID="linechart" @ref="linechartObj">

                        …

                    </SfChart>

                </div>

            </ContentTemplate>

        </DashboardLayoutPanel>

    </DashboardLayoutPanels>

</SfDashboardLayout>

@code

{

    SfChart linechartObj;

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        await Task.Delay(3000); // simulate the async operations.

        this.linechartObj.RefreshAsync();

    }

}

 

<style>

    #linechart {

        height: 100% !important;

        width: 100% !important;

    }

</style>

Please refer the shared sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: BlazorSample_d9f4cca0.zip

[Yongkee Cho]

As shown in the screenshot, the issue is the chart svg is not resized while the div enclosing the chart is resized. So the css won't help.

Since each panel is dynamically generated, it's hard to assign @ref to each chart to call RefreshAsync.

Any further 

[Subalakshmi Ramachandran]

Hi Yongkee,

We have currently validating your query, need additional time validate further. We will update details on June 4, 2024.

Regards,
Suba R

[LeoLavanya Dhanaraj]

Hi Yongkee,

Thanks for your patience.

From the shared details, we understand that you request to create a ref for the dynamically generated Chart component. We suggest you access the Chart instance using array. We have prepared sample to achieve your requirement. Please check with the below snippet for your reference.

@foreach (int i in index)

{

    <SfChart @ref="@chartInstance[i]"></SfChart>

}

@code{

    int[] index = { 0,1,2 };

    public SfChart[]? chartInstance = new SfChart[3];

}

Sample : Attached as a zip file.

Note : You can increase the array size based on panel count and call the chartInstance[i].RefreshAsync method in your application for refresh.

Regards,

Leo Lavanya Dhanaraj

Attachment: ChartInstances_e716b01c.zip