Blazor Syncfusion SfDashboardLayout - How can i update without refreshing the page

Question

<div class="d-flex flex-row-reverse align-items-center">
    <div class="mb-1">
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-one" @onclick="@(async () => { await UpdatePanelData(1); await dashboardLayout.RefreshAsync(); })" class="me-1"></Syncfusion.Blazor.Buttons.SfButton>
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-two" @onclick="@(() => UpdatePanelData(2) )" class="me-1"></Syncfusion.Blazor.Buttons.SfButton>
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-right" @onclick="@(() => UpdatePanelData(3))" class="me-1"></Syncfusion.Blazor.Buttons.SfButton>
        <Syncfusion.Blazor.Buttons.SfButton IconCss="e-icons e-page-column-left" @onclick="@(() => UpdatePanelData(4))"></Syncfusion.Blazor.Buttons.SfButton>
    </div>
</div>

it's my button, i want's update this layout;

<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>

and it's my method:

async Task UpdatePanelData(int selectedId)
{
    using (var con = await ContextFactory.CreateDbContextAsync())
    {
        var panels = await dashboardLayout.Serialize();
        switch (selectedId)
        {
            case 1:
                int column1 = 2;
                foreach (var panel in panels)
                {
                    //assignment
                }
                await con.SaveChangesAsync();

                break;
            case 2:
                int row2 = 0, count2 = 1;

                foreach (var panel in panels)
                {
                    //assignment
                }
                await con.SaveChangesAsync();

                break;
            case 3:
                int row3 = 0, count3 = 1;

                foreach (var panel in panels)
                {
                   //assignment
                }
                await con.SaveChangesAsync();

                break;
            case 4:
                int row4 = 0, count4 = 1;

                foreach (var panel in panels)
                {
                   //assignment
                }
                await con.SaveChangesAsync();
                break;
        }
        StateHasChanged();
        await dashboardLayout.RefreshAsync();
    }
}

I created the buttons to give a ready-made theme to the panels coming to the layout. The method works and the data in the db is updated, but I need to refresh the page to see this. How can I make the button change in appearance when I press it?

Answer 1

Based on the shared details, we suspect that you are adding panels to the Dashboard Layout component. We suggest you check the serialized panel once; after that, there is no need to use the "RefreshAsync" method. We have already achieved a similar scenario regarding changing the panels dynamically with predefined values.

Sample Browser : https://blazor.syncfusion.com/demos/dashboard-layout/default?theme=fluent

Additionally, if you want to change the button appearance when you click on it, we suggest utilizing the "IsToggle" property, which helps change the button appearance when you click on it.

Sample Browser : https://blazor.syncfusion.com/demos/buttons/default-functionalities?theme=fluent

Sample Browser : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IsToggle