DashboardLayout in v31.2.2 doesn't always apply style to all panels

[Tybo Vanderstraeten]

Since updating to v31.2.2, the panels in the DashboardLayout don't always get a style applied to them, resulting in panels spanning the entire DashboardLayout width and height, usually briefly before flipping back to a correct state with each panel having the correct width/height. Sometimes, this happens after some seconds, other times, this never happens.

Looking into the developer tools, I can see that in those cases, some panels lack the "style" attribute on the element.

This has only started happening singe upgrading to v31.2.2

[LeoLavanya Dhanaraj]

Hi Tybo,

Greetings from Syncfusion support.

Based on the information provided, we understand that you are facing an issue with the Dashboard Layout component rendering(panels within the component are inconsistently applying their styles) with the latest NuGet version(31.2.2).

Without knowledge of your configuration, we have checked this issue as a preliminary step by rendering the component with the specified NuGet version. However, we did not encounter any style issues, issue with component interaction or the console errors(we know, this may not be fully related to your configuration).

Sample : Attached as a zip file.

Therefore, we need the following additional details to reproduce the issue on our end:

1. Dashboard Layout component configuration details, including the property, method, and event configuration(number of panels).

2. Whether the style issue is occurring on the initial rendering or after an interaction with the component?

3. How you are rendering the panels to the component—either statically or dynamically within any events.

4. Is there any content inside the panels? If yes, share the details.

5. Any console errors or stack traces that you have encountered.

6. A minimal reproducible sample along with the exact steps to replicate the issue(If possible, share the issue replicated video footage).

This will help us assist you more effectively in finding a solution. Your input is invaluable in helping us understand your issue and in providing a timely resolution.

Regards,

Leo Lavanya Dhanaraj

Attachment: BlazorApp_fda8d49b.zip

[Tybo Vanderstraeten]

Hi,

1) The issue occurs with any amount of panels.

  <SfDashboardLayout @ref="_dashboardLayout" AllowFloating="false" AllowDragging="true" AllowResizing="true" Columns="_dashboardLayoutColumns" CellSpacing="@(new double[] { 16, 16 })" DraggableHandle=".e-panel-header" MediaQuery="max-width: 959px">
      <DashboardLayoutPanels>
      </DashboardLayoutPanels>
  </SfDashboardLayout>

2) It happens on the rendering of the dashboard.

3) The panels are rendered dynamically by using AddPanelAsync, this was all working normally before.

4) There is content inside the panels, in the form of dynamic components, any type of component can be loaded, however. The issue also occurs with non-dynamic components that just show some text and nothing else.

5) No console errors or stack traces.

What I can see from the developer tools is that, whenever this issue happens (it doesnt happen in a deterministic way, as far as I know), the panel that takes the full width/height of the dashboard is the one that doesnt have the "style" applied to its panel container and panel content. This also always seems to be the last panel in the developer tools html source (so the first actual panel in the dashboard, is what it looks like).

I can't provide a sample right now.

Kind regards,

Tybo

[LeoLavanya Dhanaraj]

Hi Tybo,

Thank you for the additional details. Based on the configuration you provided, we have prepared a Dashboard Layout sample using the latest version 31.2.4. In this sample, we’ve added a new panel that includes both a Dashboard Header and Content using the dynamic component approach. However, we were unable to reproduce the styling issue you reported with the panel when the panel is added dynamically.

<SfDashboardLayout Columns="8" AllowResizing="true" @ref="dashboardObj" AllowDragging=true>

</SfDashboardLayout>

 

<SfButton CssClass="e-primary" OnClick="AddPanelClick">Add new panel</SfButton>

 

public async Task AddPanelClick()

{

    // Choose the header and content component types dynamically

    string headerComponentName = "ButtonComponent"; // Example header component

    string contentComponentName = "TextBoxComponent"; // Example content component

 

    // Get the component types using the mapping

    Type headerComponentType = componentMapping[headerComponentName];

    Type contentComponentType = componentMapping[contentComponentName];

 

    // Generate a unique ID for each new panel

    string uniquePanelId = $"_layout{panelCounter++}"; // Unique ID for each panel

 

    PanelModel panel = new PanelModel

    {

            Id = uniquePanelId,

            SizeX = 3,

            SizeY = 2,

            Column = 0,

            Row = 0,

            Header = @<DynamicComponent Type="@headerComponentType" Parameters="@(new Dictionary<string, object>())" />,

            Content = @<DynamicComponent Type="@contentComponentType" Parameters="@(new Dictionary<string, object>())" />

    };

    await dashboardObj.AddPanelAsync(panel);

}

Please review the shared sample on your end and compare it with your project. If the issue still occurs, kindly share the full Dashboard configuration related code details and how panels are rendered(e.g.: Via AddPanelAsync on a button click? or inside a Blazor lifecycle method (OnInitializedAsync, OnAfterRenderAsync, etc.)? or through any custom method or third-party service)

Once we receive the details, we’ll check and provide a solution.

Regards,

Leo Lavanya Dhanaraj

Attachment: DashboardLayout_949cc1ff.zip