Dashboard panels can overlap when conditionally displayed

[Julien Barach]

Hi,

I have a SfDashboardLayout with some panels that are rendered conditionally (according to user rights).

So I cannot guarantee that panels have a unique place (row / column). Some panels can have the same position, but its usually not an issue as the DashboardLayout is able to detect overlapping and move some panels automatically.

But when the panels are displayed after some condition check, there can be some overlaps.

Please see the repro : https://blazorplayground.syncfusion.com/LXVJXYLdVSwWqwxV 

If you remove the display condition it works. But I need it to handle which panels can be displayed.

Regards 

[SureshRajan Alagarsamy]

Hi Julien,

We have reviewed your query and understand that you are encountering with panel overlapping issue in the Dashboard Layout component. Upon further validated in the provided sample, we observed that you have dynamically updated some panels by updating boolean variable inside the OnInitializedAsync lifecycle method. Additionally, we have noticed that the use of a delay and the RefreshAsync method may have contributed to the problem.

To resolve this, we removed the delay and the RefreshAsync method from the OnInitializedAsync lifecycle method. After this adjustment, we found that the overlapping issue no longer persists.

We have attached a sample for your reference.

Sample : https://blazorplayground.syncfusion.com/hZLzWDtgypJJrFso

If you still require the delay and refresh method, please share the specific use case for using these in the OnInitializedAsync lifecycle method. This will help us to validate the query further and provide you with a prompt solution.

Regards,
Suresh.

[Julien Barach]

Actually the delay is needed as it represents a treatment that takes time.

The refresh is not needed, it's just there to prove that even when calling the refresh method there are still overlaps.

At least Refresh should resolve overlapping.

Regards.

[SureshRajan Alagarsamy]

Hi Julien,

After further validation, To resolve the overlapping problem with the Dashboard Layout panels, we recommend updating the boolean variable in the OnAfterRenderAsync lifecycle method and trigger the "RefreshAsync" method inside the "Created" event handler. This adjustment will ensure that the panels render correctly without any overlapping.

Refer to the below code snippet for further reference.

[Index.razor]

@code {

            ....

protected override async Task OnInitializedAsync()

{

    await Task.Delay(100);

}

protected override async Task OnAfterRenderAsync(bool firstRender)

{

    if (firstRender)

    {

        display = true;

    }

}

public async Task OnCreated()

{

    await dashboardObject.RefreshAsync();

}

}

We have also attached a sample for your reference.

Sample: https://blazorplayground.syncfusion.com/VDrpsXtvSFAhShbJ

Regards,
Suresh.