How can i update dashboard-layout without refreshing the page

[Ahmet Er]

<Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-two" @onclick="@(() => UpdatePanelData(2) )" class="me-1"></Syncfusion.Blazor.Buttons.SfButton>

<Syncfusion.Blazor.Layouts.SfDashboardLayout CellSpacing="new double[] { 10, 10 }" AllowDragging AllowFloating AllowResizing @ref=dashboardLayout Columns="8" CellAspectRatio="@aspectRatio">

    <Syncfusion.Blazor.Layouts.DashboardLayoutEvents Changed="PanelsChanged"></Syncfusion.Blazor.Layouts.DashboardLayoutEvents>

i will share my UpdatePanelData method,

can you help me for how can i update my layout without refreshing the page, i used

await OnAfterRenderAsync(true);

await dashboardLayout.RefreshAsync();

but it doesn't work

Attachment: UpdatePanelData_23e8d5b6.zip

[Muthukrishnan Kandasamy]

Hi Ahmet,

Greetings from Syncfusion support.

We can update the Syncfusion Blazor Dashboard Layout component with out refreshing the page. We have prepared the sample as like your requirement. In the sample, we have updated panel SizeX, SizeY, Column, and Row dynamically in the button click event.

Refer to the code snippet,

@using Syncfusion.Blazor.Layouts

@using Syncfusion.Blazor.Buttons

 

<SfButton IconCss="e-icons e-page-column-two" @onclick="@(() => UpdatePanelData(1) )" class="me-1"></SfButton>

..

..

..

 

               <div class="content-wrapper" style="max-width: 100%">

                              <SfDashboardLayout @ref="dashboardObject" CellSpacing="@CellSpacing" Columns="@Columns">

                                             <DashboardLayoutPanels>

                                                            @foreach (PanelObject Panel in PanelData)

                                                            {

                                                                           <DashboardLayoutPanel @key="Panel" Row=@Panel.Row Column=@Panel.Column SizeX=@Panel.SizeX SizeY=@Panel.SizeY>

                                                                                          <HeaderTemplate>

                                                                                                         <div class="e-header-text">Header Area</div>

                                                                                                         <div class="header-border"></div>

                                                                                          </HeaderTemplate>

                                                                                          <ContentTemplate>

                                                                                                         <div class="panel-content">Content Area</div>

                                                                                          </ContentTemplate>

                                                                           </DashboardLayoutPanel>

                                                            }

                                             </DashboardLayoutPanels>

                              </SfDashboardLayout>

               </div>

 

@code {

               SfDashboardLayout dashboardObject;

               List<PanelObject> PanelData { get; set; } = new List<PanelObject>()

               {

                              new PanelObject(){ Column=0, Row=0, SizeX=4, SizeY=3 },

                              new PanelObject(){ Column=4, Row=0, SizeX=2, SizeY=3 },

                              new PanelObject(){ Column=0, Row=3, SizeX=6, SizeY=2 }

               };

 

               public double[] CellSpacing = { 10, 10 };

               public int Columns = 6;

 

 

               private void UpdatePanelData(int selectedId)

               {

                              List<PanelObject> UpdatedPanels = new List<PanelObject>();

                              switch (selectedId)

                              {

                                             case 1:

                                                            UpdatedPanels.Add(new PanelObject() { Column = 0, Row = 0, SizeX = 4, SizeY = 3 });

                                                            UpdatedPanels.Add(new PanelObject() { Column = 4, Row = 0, SizeX = 2, SizeY = 3 });

                                                            UpdatedPanels.Add(new PanelObject() { Column = 0, Row = 3, SizeX = 6, SizeY = 2 });

                                                            break;

                                             …

                                             …

…

                                            

                              }

                              PanelData = UpdatedPanels;

                              StateHasChanged();

               }

…

…

}

We have attached the sample for your convenience.

Regards,

Muthukrishnan K

Attachment: DashboardPanelUpdate_b3d789e9.zip