Dashboard Panel Location Replicated on Other Dashboard Layouts

[Alessandro Cirignaco]

Hi,

Bit of a long one. 
I am trying to create a Dashboard where users can have multiple tabs. Each tab will have a dashboard layout nested inside where the user can customise each dashboard differently on any of their created tabs.

Currently i am able to add Tabs, and add panels to the dashboard layouts. My issue is if i had a tab called 'Tab 1'. Inside 'Tab 1' I add a panel called 'Panel 1'.

If i add a second tab called 'Tab 2' and inside Tab 2 i add a panel called 'Panel 1' and move it to the opposite side of the layout, when i return to Tab 1 the Panel inside tab 1 has moved to the same spot as the panel was placed in Tab 2. 

I am giving both panels and Tabs unique Id's and declaring all components as 'new' components/controls.

Im not really sure how to fix this issue.

I have attached the files i am using below.

Attachment: Dashboard_fd533ce0.zip

[Vishwanathan Muruganantham]

Hi Alessandro,

Greetings from Syncfusion support

We have reviewed your query and understand that the Dashboard position is not maintained properly when used inside the tab component. Upon validating your issue, we found that a single Dashboard container is maintained across both tabs, with only the panels changing. This causes a position conflict due to the same instance being used for both panels. We suggest using the EnablePersistence, @key, and Id attributes for the SfDashboardLayout and DashboardLayoutPanel tags. This will resolve the instance conflicts and maintain the proper position in both tabs.

Refer to the below code snippet for reference.

[DashboardLayout.razor]

 

…

 

<div class="dashboard-control">

    <div class="add-button">

        <SfButton IconCss="e-icons e-plus" Content="Add Panel" @onclick="AddPanel"></SfButton>

    </div>

    <SfDashboardLayout @key=DashboardId ID="@DashboardId.ToString()" CellSpacing="@(new double[] { 10, 10 })" CellAspectRatio="2" Columns="5" AllowDragging="true" AllowResizing="true" AllowFloating="true" EnablePersistence>

        <DashboardLayoutPanels>

            @PanelsRender

        </DashboardLayoutPanels>

    </SfDashboardLayout>

</div>

 

@code {

    [Parameter] public RenderFragment? PanelsRender { get; set; }

    [Parameter] public Guid DashboardId { get; set; }

    [Parameter] public EventCallback OnAddPanel { get; set; }

 

    private void AddPanel() => OnAddPanel.InvokeAsync();

}

[DashboardPanelControl.razor]

 

…

 

<DashboardLayoutPanel SizeX="2" SizeY="2" Id="@panel.Id" @key="@panel.Id">

    <HeaderTemplate>

        <div>@panel.Content</div>

    </HeaderTemplate>

    <ContentTemplate>

        <div>@panel.Content</div>

    </ContentTemplate>

</DashboardLayoutPanel>

 

@code {

    [Parameter] public DashboardPanel panel { get; set; } = new();

}

 

…

[TabItemControl.razor]

 

…

 

<TabItem >

    <HeaderTemplate>@TabData.Header</HeaderTemplate>

    <ContentTemplate>

        <DashboardLayout  PanelsRender="@RenderPanels(TabData.Panels)" OnAddPanel="@(() => OnAddPanel.InvokeAsync(TabData))"  DashboardId="TabData.Id"/>

    </ContentTemplate>

</TabItem>

 

…

Sample: attached as zip file.

Please check the sample and let us know if you need any further assistance.

Regards,
Vishwanathan

Attachment: Dashboard_a6fe1bf4.zip