We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Dashboard panel size doesn't change dynamically

Hello,

I am using the SfDashboardLayout component and I want on button click to change the size and position of the panels.

Specifically what I am trying to do is to make the panel of the top row of the dashboard larger and so move the below panels further down.

I made a button element to do this job but the dashboard component does not refresh correctly and it does not change the panels.


So what is the way to change the panel size and postion after clicking the button?

I am posting my project below.

Thanks in advance!



Attachment: BlazorApp6_67f66ab.zip

1 Reply

LD LeoLavanya Dhanaraj Syncfusion Team November 2, 2022 04:40 AM

Hi Amanda,


Greetings from Syncfusion support


Query 1 : Dynamically change the panel size.


Based on your requirement, we have prepared a Blazor Dashboard Layout sample with the latest version(V20.3.52). By passing an arguments of Id, SizeX, and SizeY values to the ResizePanelAsync method, you can dynamically resize the panel. Here, we used the ResizePanelAsync method to resize the panel by taking the Dashboard instances with a button click. For your reference, we have attached the sample.


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


Check the below mentioned code snippets.


[Index.razor]

<button class="btn" @onclick=@ButtonClicked>Click!</button>

 

<SfDashboardLayout @ref="dashboardObj" ID="noIconCardsDashboard" Columns="4" … >

    <DashboardLayoutPanels>

        <DashboardLayoutPanel Id="layout1" SizeX="1" SizeY=1 Row="0" Col="0">

            <ContentTemplate>

                <div style="margin: 0px 5px 0px 5px;max-width:100%;">

                    Row : @newRow ; Col : @newCol

                </div>

            </ContentTemplate>

        </DashboardLayoutPanel>

    </DashboardLayoutPanels>

</SfDashboardLayout>

 

@code {

    SfDashboardLayout dashboardObj;

    private int newRow = 1; private int newCol = 1;

    private void ButtonClicked()

    {

        newRow = 3; newCol = 3;

        dashboardObj.ResizePanelAsync("layout1", newRow, newCol);

    }

}


Query 2 : Dynamically change the panel position.


From your shared details, we understand that you want to update the panel position in the Dashboard Layout component. You can meet your requirements by passing the Row, Col, and Id as arguments to the MovePanelAsync function. But currently, we are facing some issues with this method. So, we have already considered it a bug on our end. The fix for this issue will be included in our weekly patch release on November 15, 2022. You can track the status of the issue fix using the following feedback link.


Feedback link: https://www.syncfusion.com/feedback/38740/the-movepanelasync-method-does-not-work-in-the-blazor-dashboard-layout-component


Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.


We appreciate your patience.


Regards,

Leo Lavanya Dhanaraj


Loader.
Live Chat Icon For mobile
Up arrow icon