Hide and show panels

[Andi S.]

Is there any way I can hide and show panels ? Everything I`ve tried is breaking the js because it can`t find id or if is not breaking the js the drag events don`t work

Can you help me ?

[SureshRajan Alagarsamy]

Hi Andi,

We have reviewed your query and understand that you are looking for options to hide and show panels in the DashboardLayout component. We would like to inform you that currently, the DashboardLayout component does not have built-in functions for hiding and showing panels. However, we provide the "AddPanelAsync" and "RemovePanelAsync" functions in the DashboardLayout component. With these methods, you can dynamically add and remove panels in the DashboardLayout component.

Refer to the below code snippet for further reference.

Code Snippet :

[Index.razor]

 

<div>

    <SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[]{20 ,20 })" Columns="4">

    <DashboardLayoutPanels>

        <DashboardLayoutPanel>

            <ContentTemplate><div>1</div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Column=1>

            <ContentTemplate><div>2</div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Column=2>

            <ContentTemplate><div>3</div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Row=1>

            <ContentTemplate><div>4</div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Row=1 Column=1>

            <ContentTemplate><div>5</div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel Row=1 Column=2>

            <ContentTemplate><div>6</div></ContentTemplate>

        </DashboardLayoutPanel>

    </DashboardLayoutPanels>

</SfDashboardLayout>

</div>

 

<br />

 

<SfButton OnClick="RemovePanel" Content="RemovePanel"></SfButton>

<br />

<SfButton OnClick="AddPanel" Content="AddPanel"></SfButton>

 

@code{

    SfDashboardLayout dashboard;

    public int Length { get; set; }

 

    public async void RemovePanel()

    {

        List<PanelModel> panel = await this.dashboard.Serialize();

        Length = panel.Count;

        if (Length != 0)

        {

            for(var i = Length; i > Length - 1; i--)

            {

                await dashboard.RemovePanelAsync(panel[i - 1].Id);

            }

            this.dashboard.RefreshAsync();

        }

    }

 

    public async void AddPanel()

    {

        this.dashboard.AddPanelAsync(new PanelModel

        {

            Row = 1,

            Column = 5,

            Content = @<div>NewPanel</div>

        });

        this.dashboard.RefreshAsync();

    }

 

}

Check out the attached sample and get back to us if you need any further assistance.

Regards,
Suresh.

Attachment: DashboardLayoutAddRemove_Panles_5859dadf.zip