1. Home
  2. Forum
  3. Blazor
  4. Refreshing Dashboard Layout with Code-Behind

Refreshing Dashboard Layout with Code-Behind

I am having issues on updating/refreshing a SfDashboardLayout when using code-behind (x.razor inherits x.razor.cs).

The problem is that I use to create the panels can change based on async messages coming from another system.  When certain conditions are met I need to remove all the panels, then add new ones back.

Closest I got is something like this...

        private async Task RefreshDashboard()
        {
            Model = Layout.ToModel();

            await MyDashboard.RemoveAll();

            var seq = 0;

            foreach (var c in Model.Panels)
            {
                var panel = new PanelModel
                {
                    Id = c.Id.ToString(),
                    SizeX = 1,
                    SizeY = 1,
                    Col = c.Column,
                    Row = c.Row,
                    Content = builder => builder.AddMarkupContent(seq++, $"<div><h5>{@c.Name}</h5></div><div class=\"card-value align-middle\">{@c.Value.ToDisplay()}</div>")
                };

                // Call the change on the main thread or it will complain
                await InvokeAsync(() => MyDashboard.AddPanel(panel));
            }

            MyDashboard.Refresh();

            await InvokeAsync(() => StateHasChanged());
        }

Which, works-ish.  Sometimes the previous panels remain on the dashboard.  The other part of the problem is that the dashboard in a child component of another page.  So OnInitializedAsync is only called once for the page containing the dashboard.  I have tried disposing the component, but can't seem to cheat the blazor lifecycle into destroying/re-initializing the page.

Are there any examples of creating/destroying/creating a SfDashboard for a code-behind strategy?


5 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team July 23, 2020 01:17 PM UTC

Hi Matthew Wooley,  
 
Greetings from Syncfusion support. 
 
We have validated to requirement with DashboardLayout component. When calling the RemoveAll method, it removes the entire DashboardLayout panel. 
 
For your reference, we have prepared a sample based on your requirement. In this sample, we have rendered DashboardLayout component as a child component ( Defining in counter page). When clicking the button in parent page (Inde.razor page), it fires the method defining in the Child component page and also removes/add  the panel to the DashboardLayout component based on your requirement. 
 
Refer the below code snippet. 
 
[Main.page – Index.razor page] 
 
@using Syncfusion.Blazor.Buttons 
    <div style="padding:20px;"> 
        <SfButton Content="Remove Panel" OnClick="Removepanel"></SfButton> 
        <SfButton Content="Add Panel" OnClick="addPanel"></SfButton> 
    </div> 
<Counter @ref="dashboard_value"></Counter> 
@code { 
    // Reference for Counter page. 
    Counter dashboard_value; 
    public void Removepanel() 
    { 
        // It Triggers the method declare in Child component. 
        this.dashboard_value.Removepanel_child_method(); 
 
    } 
    public void addPanel() 
    { 
        // It Triggers the method declare in Child component. 
        this.dashboard_value.addPanel_child_method(); 
    } 
} 
 
[Child.component- Counter.page] 
 
@using Syncfusion.Blazor.Layouts 
 
<SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[]{10 ,10 })" Columns="5"> 
    <DashboardLayoutPanels> 
        <DashboardLayoutPanel Id="panel1"> 
            <ContentTemplate><div>Dashboard Panel</div></ContentTemplate> 
        </DashboardLayoutPanel> 
    </DashboardLayoutPanels> 
</SfDashboardLayout> 
@code{ 
 
    SfDashboardLayout dashboard; 
    public void Removepanel_child_method() 
    { 
        this.dashboard.RemoveAll(); 
    } 
    public void addPanel_child_method() 
    { 
        this.dashboard.AddPanel(new PanelModel 
        { 
            SizeX = 2, 
            SizeY = 1, 
            Row = 0, 
            Col = 0, 
            Content =@<div style="height:100%; width:100%;"> 
                <SfButton Content="Newly Added panel"></SfButton> 
            </div>, 
            Header = @<div> New Panel</div>, 
        }); 
    } 
} 
 
Refer the below sample link. 
 
Refer the below link to know more about the DashboardLayout component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P

Marked as answer
MW Matthew Wooley July 23, 2020 01:56 PM UTC

Thanks Sowmiya,

I don't think this will work for me as the panels are removed from an asynchronous callback from another service.  I must be able to remove all the panels and re-add it without any user interaction.  This has been an issue with other components in the library as they seem to rely heavily on a button click to actually refresh.

Could you please provide a sample where the Main index.razor page does the same add/remove from a different thread without a button click?

SP Sowmiya Padmanaban Syncfusion Team July 24, 2020 03:47 PM UTC

Hi Matthew Wooley,  
 
In our previous update, we have prepared a simple sample to achieve your requirement. RemoveAll and AddPanel method is DashboardLayout component, there is no relation between button click and this method. In our previously sample, we have performed this method operation during button click. You can perform the same operation in your async method. For example, you can use the RemoveAll and AddPanel method in your shared method ( RefreshDashboard method). 
 
If we misunderstood your requirement, could you please explain your scenario and reproduce the issue in previously attached sample. It will help us to resolve your issue at the earliest. 
 
Regards, 
Sowmiya.P 


AS Andi S. July 9, 2023 08:45 AM UTC

Is there any way I can hide and show the panels inside Dashboard Layout ? Everything I tried di


SS Shereen Shajahan Syncfusion Team July 10, 2023 05:45 AM UTC

Hi Andi,

Looks like there is another forum for the same query, please follow-up there,

Hide and show panels | Blazor Forums | Syncfusion

We are marking this as solved.

Regards,

Shereen




Loader.
Up arrow icon