1. Home
  2. Forum
  3. Blazor
  4. Dynamic dashboard with Syncfusion components, sometimes component inside panel is not rendered

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

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);
    }
}
'''

1 Reply 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team October 8, 2020 12:40 PM UTC

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. 
 
 
Please, refer the following links to know more about SF Blazor DashboardLayout component  
  
UG Documentation  
  
Demo link  
  
API reference  
  
   
Please let us know, if you need any further assistance.  
  
Regards,   
Sowmiya.P  


Marked as answer
Loader.
Up arrow icon