Can dynamic load Compoment for the ContentTemplate ?

[Jacky]

Hi Support,

I refer the sample Dashboard Layout Predefine Layouts Sample ,

Can I dynamic load Blazor Compoment for the ContentTemplate ?

Best Regards!

Jacky

[LeoLavanya Dhanaraj]

Hi Jacky,

Greetings from Syncfusion support.

Yes. You can dynamically load the component page using the ContentTemplate support in the Dashboard Layout component. Based on your requirement, we have prepared a Blazor Dashboard Layout sample in the latest version(V20.2.45). We have set the Counter page inside the Dashboard content panel using its corresponding page(Tag) name.

Refer to the below code snippets.

[Index.razor]

<SfDashboardLayout CellSpacing="@(new double[]{10 ,10 })" Columns="5">

    <DashboardLayoutPanels>

        <DashboardLayoutPanel>

            <HeaderTemplate><div>Panel 0</div></HeaderTemplate>

            <ContentTemplate><div style="padding:5px;"><Counter></Counter></div></ContentTemplate>

        </DashboardLayoutPanel>

        <DashboardLayoutPanel SizeX=2 SizeY=2 Column=1>

            <HeaderTemplate><div>Panel 1</div></HeaderTemplate>

            <ContentTemplate><div style="height:100%;width:100%;padding:5px;"><FetchData></FetchData></div></ContentTemplate>

        </DashboardLayoutPanel>

        …

    </DashboardLayoutPanels>

</SfDashboardLayout>

 

[Counter.razor]

@page "/counter"

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Popups

 

<SfTooltip ID="Tooltip" Target="#btn" Content="@Content">

    <SfButton ID="btn" Content="Show Tooltip"></SfButton>

</SfTooltip>

 

@code

{

    string Content = "Lets go green & Save Earth !!";

}

Check the output screenshot.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicDashboard-1780364346.zip

Please check the attached sample and get back to us if you need any further assistance.

Note : If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Leo Lavanya Dhanaraj

[Jacky]

Hi Leo Lavanya Dhanaraj.

Thanks your sample, but your sample is set fix Compoment for  ContentTemplate.

Syncfusion Sample for Predefine Layout is Dynamic to generate the ContentTemplate, how can I set the Compoment at the behind code @ {} so I can change it dynamicly .

Best Regards!

Jacky

[LeoLavanya Dhanaraj]

Hi Jacky,

We have validated your requirement in Blazor Dashboard Layout component. You can use the RenderFragment to set content of panels. Here, we have set the Counter page within the @code block using its corresponding page(Tag) name. For your reference, we have attached the sample with the respective configurations.

Refer to the below code snippets.

[Index.razor]

<SfDashboardLayout Columns="4" AllowResizing="true" @ref="dashb">

    <DashboardLayoutPanels>

        @foreach (WidgetData widget in widgets)

        {

            <DashboardLayoutPanel Row[email protected] SizeX[email protected] Col[email protected] SizeY[email protected]>

                <HeaderTemplate>

                    <p>@widget.Header</p>

                </HeaderTemplate>

                <ContentTemplate>

                    <p>@widget.content</p>

                </ContentTemplate>

            </DashboardLayoutPanel>

        }

    </DashboardLayoutPanels>

</SfDashboardLayout>

 

@code {

    SfDashboardLayout dashb;

    public List<WidgetData> widgets = new List<WidgetData>

    {

        new WidgetData {ID="lay1", X = 0, Y = 0, Width = 1, Height = 1 , Header="Panel1",  content=@<div style="padding:5px;"><Counter></Counter></div> },

        new WidgetData {ID="lay2", X = 0, Y = 1, Width = 1, Height = 1 , Header="Panel2", content=@<div style="height:100%;width:100%;padding:5px;"><FetchData></FetchData></div>},

        new WidgetData { ID="lay3",X = 0, Y = 2, Width = 1, Height = 1 , Header="Panel3", content=@<div style="padding:5px;"><SfButton Content="Button2"></SfButton></div> }

    };

    public class WidgetData

    {

        public string ID { get; set; }

        public int X { get; set; }

        public int Y { get; set; }

        public int Width { get; set; }

        public int Height { get; set; }

        public RenderFragment content { get; set; }

        public string Header { set; get; }

    }

}

Sample :  https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicPanelContent-280071380.zip

Please check the attached sample and get back to us if you need any further assistance.

Note : If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Leo Lavanya Dhanaraj