1. Home
  2. Forum
  3. Blazor
  4. Dashboard panel not refreshing properly on RemovePanel

Dashboard panel not refreshing properly on RemovePanel

Hello Sycnfusion team

I implemented a dashboard layout with panels which should render dynamically, according to the corresponding checkbox state (display when check, don't display when unchecked). In theory it should work, but there is an issues display refresh. When using "RemovePanel", the removed panels don't disappear, but when resizing the display screen, they do. On the otherhand, adding panels with "AddPanel" does the rerendering instantly.

I checked the forum and seen some similar issues, which might be related to mine:

In contrast to the implementation used in this thread, I just remove the panel, instead of changing anything on my datastructure.
Also because I couldn't find the advise in the release notes 18.4.0.30 which says "avoid" adding panels, or am I missunderstanding something here?

In this thread there was also a somehow similar case described.

We're currently using version 19.1.0.59.

Any advice on that?

Code Snippet:

<div class="col-lg-12 control-section">
    <SfToolbar>
        <ToolbarItems>
            @foreach (var chart in renderChartsDictionary)
            {
                <ToolbarItem Align="@ItemAlign.Left">
                    <Template>
                        <CascadingValue Value="this">
                            <ChartDisplayCheckbox id="@(chart.Key)" isChecked="@(chart.Value.Item1)" />
                        </CascadingValue>
                    </Template>
                </ToolbarItem>
            }
        </ToolbarItems>
    </SfToolbar>
</div>
<div>
    <SfDashboardLayout @ref="dashboardObject" CellSpacing="@(new double[]{10, 10})" Columns="5">
        <DashboardLayoutPanels>
        </DashboardLayoutPanels>
    </SfDashboardLayout>
</div>

@code{

    public SfDashboardLayout dashboardObject;

    public IDictionary<Guid, Tuple<bool, Type>> renderChartsDictionary { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        renderChartsDictionary = new Dictionary<Guid, Tuple<bool, Type>>
        {
            { Guid.NewGuid(), new Tuple<bool,Type>(false, typeof(LineChart))},
            { Guid.NewGuid(), new Tuple<bool,Type>(true, typeof(LineChart))},
            { Guid.NewGuid(), new Tuple<bool,Type>(true, typeof(LineChart))},
        };
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;

        foreach (var chart in renderChartsDictionary)
        {
            if (chart.Value.Item1)
            {
                await RefreshChartDisplay(chart.Value.Item1, chart.Key);
            }
        }
    }

    private RenderFragment renderChart(Guid id, Type t) => builder =>
    {
        builder.OpenComponent(0, t);
        builder.AddAttribute(1, "id", id);
        builder.CloseComponent();
    };

    public async Task RefreshChartDisplay(bool isActive, Guid id)
    {
        //https://www.syncfusion.com/forums/156285/refreshing-dashboard-layout-with-code-behind
        // Refresh issue when removing panels
        if (isActive)
        {
            await dashboardObject.AddPanel(
                new PanelModel
                {
                    SizeX = 1,
                    SizeY = 1,
                    Id = id.ToString(),
                    Content = renderChart(id, renderChartsDictionary
                        .Where(_ => _.Key == id).FirstOrDefault().Value.Item2)
                });
        }
        else
        {
            await dashboardObject.RemovePanel(id.ToString());
        }

    }
}


For understanding: The RefreshChartDisplay is triggered by the child component (checkbox), which receives an initial value (checked or unchecked) from the dictionary.

Thanks for Reply

regards

5 Replies 1 reply marked as answer
SS Sharon Sanchez Selvaraj Syncfusion Team May 11, 2021 01:59 PM UTC

Hi Janick, 
 
Thanks for contacting Syncfusion Support. 
 
We checked with the reported query and the provided code. We have rendered Dashboard Layout in a sample similar to the provided code as shown below.  
 
Refer to the code snippets wherein the panel content is rendered. In the OnInitialized method, the required key value pairs are provided. 
 
protected override async Task OnInitializedAsync() 
    { 
        await base.OnInitializedAsync(); 
 
        renderChartsDictionary = new Dictionary<Guid, Tuple<bool, string>> 
{ 
            { Guid.NewGuid(), new Tuple<bool,string>(false, "1")}, 
            { Guid.NewGuid(), new Tuple<bool,string>(true, "2")}, 
            { Guid.NewGuid(), new Tuple<bool,string>(true, "3")}, 
        }; 
    } 
 
With OnAfterRender method, the function as provided in your code to render the panels is invoked. 
 
protected override async Task OnAfterRenderAsync(bool firstRender) 
    { 
        if (!firstRender) return; 
 
        foreach (var chart in renderChartsDictionary) 
        { 
            if (chart.Value.Item1) 
            { 
                await RefreshChartDisplay(chart.Value.Item1, chart.Key); 
            } 
 
 
        } 
    } 
 
Function code snippet wherein the panels are added and removed accordingly. 
 
public async Task RefreshChartDisplay(bool isActive, Guid id) 
    { 
        //https://www.syncfusion.com/forums/156285/refreshing-dashboard-layout-with-code-behind 
        // Refresh issue when removing panels 
        if (isActive) 
        { 
            await dashboardObject.AddPanel( 
                new PanelModel 
                { 
                    SizeX = 1, 
                    SizeY = 1, 
                    Id = id.ToString(), 
                    Header =@<div>@isActive</div> 
                                }); 
                        } 
                        else 
                        { 
                            await dashboardObject.RemovePanel(id.ToString()); 
                        } 
                    } 
 
Refer to the screenshot below where the panel(with false value) is removed with the attached sample. 
 
 
 
Refer to the sample below. 
 
 
Please check the above sample and if the issue persists, kindly modify the sample so as to replicate your issue at our end to assist you promptly.  
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


JA Janick A Ludi May 14, 2021 07:13 AM UTC

Hello Sharon

I am confused. Your code example is an exact copy of what I sent you as mine, only replacing the content with the header..

Still, it does not properly refresh on "RemovePanel".  Furthermore, resizing the browser window causes js errors in one of your js files, as of the console:


BUT, resizing the window, makes the panel disappear. Whether or not its behaviour is erronouse.

Thanks for your support.
Regards



SS Sharon Sanchez Selvaraj Syncfusion Team May 17, 2021 11:39 AM UTC

Hi Janick, 
 
We have checked with the provided screenshot. We suspect that the issue arises due to the Content present within the Dashboard Layout. So here we have attached a video with our previous sample, which shows that there’s no error from our side when resizing the window. We had checked by rendering the Content inside the dashboard, but we were not able to replicate the issue in our end. 
 
Please refer to the video attachment. 
 
 
Kindly modify the sample already provided to replicate your issue so that we can assist you promptly. And please provide the details as to using Refresh method of Dashboard elsewhere in your application. 
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


Marked as answer
JA Janick A Ludi May 28, 2021 09:05 AM UTC

Hello Sharon

Thank you for your reply.

Could you provide an example with "real" content e.g. an sfChart in the panel with a web request on an external data source, or something similar?

public async Task RefreshChartDisplay(bool isActive, Guid id) 
    { 
        //https://www.syncfusion.com/forums/156285/refreshing-dashboard-layout-with-code-behind 
        // Refresh issue when removing panels 
        if (isActive) 
        { 
            await dashboardObject.AddPanel( 
                new PanelModel 
                { 
                    SizeX = 1, 
                    SizeY = 1, 
                    Id = id.ToString(), 
                    Content = ....
                    }
                      } 
                        else 
                        { 
                            await dashboardObject.RemovePanel(id.ToString());
                        } 
                    }

Thank you for your reply.
Janick A. Lüdi


SS Sharon Sanchez Selvaraj Syncfusion Team May 31, 2021 01:55 PM UTC

  
Hi Janick, 
  
  
We have modified the previous sample with content of Chart using remote data based on your requirement. 
  
  
Refer to the sample below. 
  
  
  
  
Please check the above sample and get back to us if you need further assistance.  
  
  
Regards, 
 
Sharon Sanchez S. 


Loader.
Up arrow icon