PivotTable not resizing with DashboardPanel

[Bruno Ramos]

Hi.

I'm using a Dashboard layout with a Pivot view inside one of the panels.

When i resize the panel, the Pivot table scales properly, but when the pivot table is in chart mode, the resize does not work. 

Is the chart on a different css?

How can make the PivotTable resize when in chart mode?

[Rajeshkannah G]

Hi Bruno,

Sorry for the inconvenience. We could reproduce the issue and we have reported it to our internal chart team and we will update further details within 2 business days (May 23,2023).

Regards,

Rajeshkannah G

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Bruno,

Thanks for the patience. We have considered the reported issue as a bug “Pivotchart not refreshed properly while resizing when placed inside a Dashboard layout”, and the fix for this issue will be included in our volume 2 main release which is expected to roll out by 20^th June 2023. You can track the issue status using the feedback link below.

https://www.syncfusion.com/feedback/43940/pivotchart-not-refreshed-properly-while-resizing-when-placed-inside-a-dashboard

We appreciated your patience until.

Regards,

Rajeshkannah G

[Rajeshkannah G]

Hi Bruno,

We are glad to announce our Essential Studio Volume 2 is rolled out and the fix for the issue "PivotChart is not resized when placed in a dashboard layout " has been included in this release.

Additionally, we wish to let you know that when the browser window is resized, the pivot chart will automatically adjust its size to fit. However, pivot chart won't acknowledge the dashboard panel has been resized when we do so. Therefore, we recommend using the “LayoutRefreshAsync()” method within the "OnResizeStop" event to refresh the pivot chart with respect to the dashboard panel size. Please look at the code example below.

Code Example

    <SfDashboardLayout @ref="dashboard" Columns="12" AllowDragging="true" AllowFloating="true" AllowResizing="true">

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

        <DashboardLayoutPanels>

            <DashboardLayoutPanel SizeX="6" SizeY="5" Row="0" Column="0" AllowDragging="true">

                <HeaderTemplate><div>Pivotchart inside a dashboard layout</div></HeaderTemplate>

                <ContentTemplate>

                        <SfPivotView TValue="ProductDetails" @ref="@pivot" Height="100%" Width="100%">

                            <PivotViewDataSourceSettings DataSource="@dataSource">

                                <PivotViewColumns>

                                    <PivotViewColumn Name="Year"></PivotViewColumn>

                                    <PivotViewColumn Name="Quarter"></PivotViewColumn>

                                </PivotViewColumns>

                                <PivotViewRows>

                                    <PivotViewRow Name="Country"></PivotViewRow>

                                    <PivotViewRow Name="Products"></PivotViewRow>

                                </PivotViewRows>

                                <PivotViewValues>

                                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>

                                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>

                                </PivotViewValues>

                            </PivotViewDataSourceSettings>

                            <PivotViewDisplayOption View=View.Chart></PivotViewDisplayOption>

                            <PivotChartSettings Title="Sales Analysis">

                                <PivotChartSeries Type="Syncfusion.Blazor.PivotView.ChartSeriesType.Pie"></PivotChartSeries>

                                <PivotChartPrimaryYAxis>

                                    <PivotChartPrimaryYAxisBorder Width="0"></PivotChartPrimaryYAxisBorder>

                                </PivotChartPrimaryYAxis>

                            </PivotChartSettings>

                        </SfPivotView>                      

                </ContentTemplate>

            </DashboardLayoutPanel>

        </DashboardLayoutPanels>

    </SfDashboardLayout>

 

@code {

    public SfDashboardLayout dashboard;

    public SfPivotView<ProductDetails> pivot;

  

 

    public async void ResizeStop(ResizeArgs args)

    {

        await pivot.LayoutRefreshAsync();

    }

Output screenshot:

Meanwhile we have prepared a sample for your reference. Please find it in the attachments.

Please look at the release notes below.

Release Notes : https://blazor.syncfusion.com/documentation/release-notes/22.1.34?type=all

Please let us know if you have any queries.

With Regards,

Rajeshkannah Gopalakrishnan.

Attachment: PivotBlaz_e71da074.zip