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!
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.
Check the below mentioned code snippets.
<button class="btn" @onclick=@ButtonClicked>Click!</button>
<SfDashboardLayout @ref="dashboardObj" ID="noIconCardsDashboard" Columns="4" … >
<DashboardLayoutPanel Id="layout1" SizeX="1" SizeY=1 Row="0" Col="0">
<div style="margin: 0px 5px 0px 5px;max-width:100%;">
Row : @newRow ; Col : @newCol
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.
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.
Leo Lavanya Dhanaraj