1. Feedback
  2. Blazor
  3. 58075

Welcome to the Blazor feedback portal. We’re happy you’re here! If you have feedback on how to improve the Blazor, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Error when rendering the dashboard layout with dynamic components

Hello,

I want to display dynamic charts using the RenderTreeBuilder inside my pannels but i got the following error:


System.Collections.Generic.KeyNotFoundException: The given key 'PrimaryXAxis' was not present in the dictionary.

   at Syncfusion.Blazor.Charts.Internal.ChartAxisRendererContainer.AssignAxisToSeries(IEnumerable`1 seriesList, Boolean refreshSeries)

   at Syncfusion.Blazor.Charts.SfChart.InitiAxis()

   at Syncfusion.Blazor.Charts.SfChart.PerformLayout()

   at Syncfusion.Blazor.Charts.SfChart.OnAfterRenderAsync(Boolean firstRender)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)



<SfDashboardLayout @ref="dashboard" CellSpacing="@(new double[] { 10, 10 })" Columns="5">
    <DashboardLayoutPanels>
    @foreach (var panel in panels)
    {
            <DashboardLayoutPanel Id="@panel.Id" SizeX="@panel.SizeX" SizeY="@panel.SizeY" Row="@panel.Row" Column="@panel.Column">
     <ContentTemplate>
@(panel.Content)
</ContentTemplate>
</DashboardLayoutPanel>
        }
        </DashboardLayoutPanels>
</SfDashboardLayout>

@code{
    public SfDashboardLayout dashboard;
    List ChartDataList { get; set; }

protected override void OnInitialized()
{
    ChartDataList = new List
        {
        new ChartData { Date = new DateTime(2023, 1, 1), AverageIndex = 10 },
        new ChartData { Date = new DateTime(2023, 2, 1), AverageIndex = 20 },
        new ChartData { Date = new DateTime(2023, 3, 1), AverageIndex = 30 },
        };
    }

    private RenderFragment CreateChartComponent(
        IEnumerable dataSource,
        string xName,
        string yName,
        ChartSeriesType type = ChartSeriesType.Column,
        string xAxisFormat = "MMM yyyy",
        Syncfusion.Blazor.Charts.ValueType xAxisValueType = Syncfusion.Blazor.Charts.ValueType.DateTimeCategory,
        IntervalType xAxisIntervalType = IntervalType.Months,
        double xAxisInterval = 1.0) => builder =>
    {
        int seq = 0;

        // Main component SfChart
        builder.OpenComponent(seq++);

        // Add child content to SfChart
        builder.AddAttribute(seq++, "ChildContent", (RenderFragment)((builder2) =>
        {
            // Add Primary X Axis
            builder2.OpenComponent(seq++);
            builder2.AddAttribute(seq++, "ValueType", xAxisValueType);
            builder2.AddAttribute(seq++, "LabelFormat", xAxisFormat);
            builder2.AddAttribute(seq++, "IntervalType", xAxisIntervalType);
            builder2.AddAttribute(seq++, "Interval", xAxisInterval);
            builder2.CloseComponent();

            // Add Primary Y Axis
            builder2.OpenComponent(seq++);
            builder2.CloseComponent();

            // Add Tooltip
            builder2.OpenComponent(seq++);
            builder2.AddAttribute(seq++, "Enable", true);
            builder2.CloseComponent();

            // Add Series
            builder2.OpenComponent(seq++);
            builder2.AddAttribute(seq++, "ChildContent", (RenderFragment)((builder3) =>
            {
                builder3.OpenComponent(seq++);
                builder3.AddAttribute(seq++, "DataSource", dataSource);
                builder3.AddAttribute(seq++, "XName", xName);
                builder3.AddAttribute(seq++, "YName", yName);
                builder3.AddAttribute(seq++, "Type", type);
                builder3.CloseComponent();
            }));
            builder2.CloseComponent();
        }));
        builder.CloseComponent();
    };
}

But i have no error when I display my charts like this :
@foreach (var panel in panels)
{
    <div>@(panel.Content)</div>
}