Dynamic dashboard with Syncfusion components, sometimes component inside panel is not rendered

[Brecht Porrez]

I want to create a dynamic dashboard where the user can add panels. A lot of these panels contain Syncfusion components. Eg. SfHeatMap.

In order to scale the SfHeatMap component properly inside the panel, I need to assign an ID. Of course the dashboard can contain multiple panels, each with an SfHeatMap, so in that case, the ID needs to be generated randomly so no 2 SfHeatMap components have the same ID. If I do that, on some panels the SfHeatMap is rendered, on others it is missing. Below you van find the code of a heatmap widget. This widget is than added to the panel.

'''

@using Syncfusion.Blazor.CircularGauge;
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.HeatMap

<div style="height:100%; width:100%">
    <SfHeatMap ID="@id" AllowSelection="true" @ref="heatMap" Width="100%" DataSource="@HeatMapData">
        <HeatMapEvents CellSelected="CellSelect"></HeatMapEvents>
        <HeatMapCellSettings ShowLabel="false" TileType="CellType.Rect"></HeatMapCellSettings>
        <HeatMapXAxis Labels="@XAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapXAxis>
        <HeatMapYAxis Labels="@YAxisLabels" ValueType="Syncfusion.Blazor.HeatMap.ValueType.Category"></HeatMapYAxis>
        <HeatMapPaletteSettings Type="PaletteType.Fixed">
            <HeatMapPalettes>
                <HeatMapPalette Color="#FF0000" Label="Low" Value=0.5></HeatMapPalette>
                <HeatMapPalette Color="#FF6500" Label="Moderate" Value=0.8></HeatMapPalette>
                <HeatMapPalette Color="#32CD32" Label="High" Value=1></HeatMapPalette>
            </HeatMapPalettes>
        </HeatMapPaletteSettings>
    </SfHeatMap>
</div>

<style>
   
    #chart {
        width: inherit;
        height: inherit;
    }
   
    [ID$="chart"] {
        width: inherit;
        height: inherit;
    }
</style>

@code {
    [Parameter]
    public HeatmapWidgetData WidgetData { get; set; }

    [Parameter]
    public EventCallback<CurrentValueWidgetData> OpenSettings { get; set; }

    private SfHeatMap heatMap;

    private string id = Guid.NewGuid().ToString() + "-chart";

    double?[,] GetDefaultData()
    {
        double?[,] dataSource = new double?[,]
        {
            {0.3, 0.8, 1.1},
            {0.4, null, 1.05},
            {1.2, 0.9, 0.6}
        };
        return dataSource;
    }
    string[] XAxisLabels = new string[] { "Room 1", "Room 2", "Room 3" };
    string[] YAxisLabels = new string[] { "Line 3", "Line 2", "Line 1" };
    public object HeatMapData { get; set; }
    protected override void OnInitialized()
    {
        HeatMapData = GetDefaultData();
    }

    private void CellSelect(ISelectedEventArgs args)
    {
        Console.WriteLine(args.Data);
    }
}

'''

[Sowmiya Padmanaban]

Hi Brecht Porrez,  

 

Greetings from Syncfusion support. 

 

We have checked your reported query wit DashboardLayout component. you can dynamically add the panels using addPanel method of DashboardLayout component.  

 

By default, Heatmap component generated a random id when the heatmap id is not defined. So, no need to add the ID for heatmap component definition code. 

 

Refer the below code snippet for adding the panel to the DashboardLayout component. 

 

    public void AddClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 

    { 

        this.dashboard.AddPanel(new PanelModel 

        { 

            SizeX = 2, 

            SizeY = 1, 

            Row = 0, 

            Col = 0, 

            Content =@<div style="height:100%; width:100%;"> 

                            <SfHeatMap DataSource="@HeatMapData"> 

                                <HeatMapTitle Text="Sales Revenue per Employee (in 1000 US$)"></HeatMapTitle> 

                                <HeatMapCellSettings ShowLabel="true" TileType="CellType.Rect"></HeatMapCellSettings> 

                            </SfHeatMap> 

                </div>, 

            Header = @<div>Header Content</div>, 

          }); 

     } 

<style> 

    .e-heatmap { 

        width:100%; 

        height:100%; 

    } 

</style> 

 

Please, refer the below sample link. 

 

https://www.syncfusion.com/downloads/support/forum/158478/ze/Heatmap-1796722995.zip 

 

Please, refer the following links to know more about SF Blazor DashboardLayout component  

  

UG Documentation	https://blazor.syncfusion.com/documentation/dashboard-layout/getting-started/
Demo link	https://blazor.syncfusion.com/demos/dashboard-layout/default
API reference	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html

   

Please let us know, if you need any further assistance.  

  

Regards,   

Sowmiya.P