An unexpected error occurredIndex was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index'

[tech miro]

I'm getting this Error when trying to refresh DAtasourceasync 

crit:Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]      Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')   at System.Collections.Generic.List`1[[Syncfusion.Blazor.Diagram.Internal.NodeInfo, Syncfusion.Blazor.Diagram, Version=29.2.9.0, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89]].get_Item(Int32 index)   at Syncfusion.Blazor.Diagram.Internal.RadialTree.PopulateLevels(DiagramLayout layout)   at Syncfusion.Blazor.Diagram.Internal.RadialTree.DoLayout(DiagramLayout layout, DiagramObjectCollection`1 nodes, Dictionary`2 nameTable, DiagramPoint viewport)   at Syncfusion.Blazor.Diagram.Internal.RadialTree.UpdateLayout(DiagramObjectCollection`1 nodes, Dictionary`2 nameTable, Layout layoutProp, DiagramPoint viewport)   at Syncfusion.Blazor.Diagram.SfDiagramComponent.DoingLayout()   at Syncfusion.Blazor.Diagram.SfDiagramComponent.DoLayoutAsync()   at Syncfusion.Blazor.Diagram.SfDiagramComponent.DoLayout()   at Syncfusion.Blazor.Diagram.SfDiagramComponent.RefreshingDataSource()   at Syncfusion.Blazor.Diagram.SfDiagramComponent.RefreshDataSourceAsync()   at VoneEnv.Client.Components.Vone.Perimetre.SyncDiagram.OnDiagramLayoutTypeChanged() in C:\PC\Project\VoneEnv\Client\Components\Vone\Perimetre\SyncDiagram.razor.cs:line 777

on this method 

private async Task OnDiagramLayoutTypeChanged()

{

    DiagramLayoutType = (LayoutType)SelectedDiagramLayout.Id;

    await sfDiagramComponent.RefreshDataSourceAsync();

}

to know that i'm creating the node and connector staticly no datasource is provided

[tech miro]

Additional information 

razor code 

            <SfDiagramComponent ID="Diagram" @ref="sfDiagramComponent" Width="100%" Height="600px" NodeCreating="OnNodeCreate" Nodes="@diagramNodes" ConnectorCreating="OnConnectorCreate" InteractionController="DiagramTool"
                                Connectors="@diagramConnectors" [email protected] Click="ClickInDiagram" PropertyChanged="OnPropertyChanged">


                <Layout @bind-Type="@DiagramLayoutType" HorizontalSpacing="50" VerticalSpacing="50" Orientation="LayoutOrientation.TopToBottom" />


                    <LineRoutingSettings ObstaclePadding="10" RoutingType="RoutingTypes.Advanced"  />
                <DiagramTemplates Context="context">
                        <NodeTemplate>
                        @if (IsVisible(context.ID))
                            {
                                <div style="background-color:@(context.Style?.Fill ?? "gray"); border:@($"{context.Style?.StrokeWidth ?? 1}px solid {context.Style?.StrokeColor ?? "black"}"); height:100%;">
                                    <div class="d-flex">
                                        <strong>@context.Annotations.FirstOrDefault(i => i.AdditionalInfo.ContainsKey("BaseAnnotation") == true).Content</strong>
                                    <RadzenIcon class="filled-icon mx-2" Style="width:14px; cursor:pointer;" Icon="visibility_off" IconColor="@Colors.Secondary" @onclick="(args => ToggleNodeVisibility(context.ID))" title="@L["TxtHideTheCompany"]" />
                                    </div>
                                    <ul class="text-center">
                                        @foreach (var annotation in context.Annotations.Where(i => i.AdditionalInfo.ContainsKey("BaseAnnotation") == false))
                                        {
                                            <li>@annotation.Content</li>
                                        }
                                    </ul>
                                </div>
                            }
                            else
                            {
                            <RadzenIcon class="filled-icon my-3 text-center" Style="width:14px; cursor:pointer;" Icon="visibility" IconColor="@Colors.Secondary" @onclick="(args => ToggleNodeVisibility(context.ID))" title="@L["TxtShowTheCompany"]" />
                            }
                        </NodeTemplate>
                    </DiagramTemplates>
            </SfDiagramComponent>

LayoutType DiagramLayoutType { get; set; } = LayoutType.ComplexHierarchicalTree;
DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing |  DiagramConstraints.UserInteraction;
DiagramInteractions DiagramTool = DiagramInteractions.Default | DiagramInteractions.ZoomPan| ~DiagramInteractions.MultipleSelect | ~DiagramInteractions.SingleSelect;

[Jawin John]

Hi,

Based on the information you provided, we created a simple sample with 7 nodes and 6 connectors to render a ComplexHierarchicalTree layout. We then changed the layout type to RadialTree. However, we were unable to reproduce the issue you reported on our end.

To help us better understand the scenario, could you please let us know how many nodes and connectors you attempted to render? Additionally, we’d appreciate it if you could clarify the purpose of switching the layout type from ComplexHierarchicalTree to RadialTree, as these two layout types have distinct behaviors and rendering logic.

For your reference, we’ve shared the sample we used for testing. Please take a look, and if you're still facing the issue, kindly share a simplified sample that reproduces the problem so we can investigate further.

Best Regards,

Jawin

Attachment: SF197099_35b13fd0.zip

[tech miro]

About Your question

- how  many nodes and connectors?  this will be dynamic, but in the test case i used, there are  12 nodes and 17 connectors 

you will find a simple way to reproduce the issue, 

Note: The issue typically appears after the second or third change.

Attachment: SF197099_35b13fd0_104069cb.rar

[Jawin John]

Hi,

We were able to reproduce the reported issue using the sample you provided. We are currently validating the root cause and will share detailed findings as soon as possible.

In the meantime, could you please clarify the reason for changing the layout type from ComplexHierarchicalTree to RadialTree? These two layout types have different behaviors and rendering logic, which may impact the expected outcome.

Best Regards,
Jawin

[Jawin John]

Hi,

We’ve validated the sample you provided. In the current layout of the ComplexHierarchicalTree, each node appears to have multiple parent nodes. When attempting to switch to a RadialTree layout, this structure becomes invalid — the RadialTree requires that each node has only one parent.

Please consider restructuring the data to ensure a single-parent hierarchy for each node if you wish to use the RadialTree layout.

Let us know if you need help with that!

Best Regards,
Jawin

[tech miro]

But even if with other diagram layout like 

'ComplexHierarchicalTree' 
Nodes = new DiagramObjectCollection<Node>()
        {
           new Node() { ID = "Node395", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Société B Société B (100,00) % 395" } } },
            new Node() { ID = "Node390", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Societe 1 Societe 1 (0,66) % 390" } } },
            new Node() { ID = "Node393", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Societe A Societe A (2,01) % 393" } } },
            new Node() { ID = "Node482", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "S22 - 11 S22 - 11 (80,00) % 482" } } },
            new Node() { ID = "Node492", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Ford Ford 1 (2,47) % 492" } } },
            new Node() { ID = "Node505", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Full test Full test (55,63) % 505" } } },
            new Node() { ID = "Node514", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Full test 2 Full test 2 (50,00) % 514" } } },
            new Node() { ID = "Node413", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Société D Société D (50,34) % 413" } } },
            new Node() { ID = "Node458", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Soc Adress1 Soc Adress1 (100,00) % 458" } } },
            new Node() { ID = "Node469", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Soc Save1 Soc Save1 (25,00) % 469" } } },
            new Node() { ID = "Node481", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "S11 S11 (100,00) % 481" } } },
            new Node() { ID = "Node483", Shape = new Shape() { Type = NodeShapes.HTML }, Annotations = new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "S3 - 11 S3 - 11 (100,00) % 483" } } },


        };

Connectors = new DiagramObjectCollection<Connector>()
        {
            new Connector() { ID = "Connector395_390", SourceID = "Node395", TargetID = "Node390" },
            new Connector() { ID = "Connector390_393", SourceID = "Node390", TargetID = "Node393" },
            new Connector() { ID = "Connector390_482", SourceID = "Node390", TargetID = "Node482" },
            new Connector() { ID = "Connector390_492", SourceID = "Node390", TargetID = "Node492" },
            new Connector() { ID = "Connector492_393", SourceID = "Node492", TargetID = "Node393" },
            new Connector() { ID = "Connector390_505", SourceID = "Node390", TargetID = "Node505" },
            new Connector() { ID = "Connector390_514", SourceID = "Node390", TargetID = "Node514" },
            new Connector() { ID = "Connector395_393", SourceID = "Node395", TargetID = "Node393" },
            new Connector() { ID = "Connector395_413", SourceID = "Node395", TargetID = "Node413" },
            new Connector() { ID = "Connector413_505", SourceID = "Node413", TargetID = "Node505" },
            new Connector() { ID = "Connector395_458", SourceID = "Node395", TargetID = "Node458" },
            new Connector() { ID = "Connector395_469", SourceID = "Node395", TargetID = "Node469" },
            new Connector() { ID = "Connector395_481", SourceID = "Node395", TargetID = "Node481" },
            new Connector() { ID = "Connector395_483", SourceID = "Node395", TargetID = "Node483" },
            new Connector() { ID = "Connector393_514", SourceID = "Node393", TargetID = "Node514" },
        };

i getting this problem repetitive errore index out of range  

[Jawin John]

Hi,

 

We were able to reproduce the reported issue using the sample you provided. We are currently validating the root cause and will share detailed findings as soon as possible.

 

Best Regards,

Jawin

[Jawin John]

Hi,

Reported issue:  Index Out of Range Error When Switching to ComplexHierarchicalTree Layout in Blazor Diagram

We have confirmed that the reported issue is a bug and have logged a defect report regarding it. We will fix the issue and include the fix in our upcoming weekly NuGet release, which is expected to be rolled out on "AUG 5, 2025". We appreciate your patience until then.  
 

Meanwhile, you can track the status of the bug at the following link:

Feedback Link: https://www.syncfusion.com/feedback/68862/index-out-of-range-error-when-switching-to-complexhierarchicaltree-layout-in
 

Disclaimer: The inclusion of this solution in the weekly release may change due to other factors, including but not limited to QA checks and work reprioritization.

Best Regards,
Jawin

[Jawin John]

Hi,

 

We have fixed the reported issue  “Index Out of Range Error When Switching to ComplexHierarchicalTree Layout in Blazor Diagram” and included the fix in our SB patch release(30.2.4). Please update the “Syncfusion.Blazor.Diagram” package to the latest version in your application to resolve the reported issue. Please find the package link below.

 

https://www.nuget.org/packages/Syncfusion.Blazor.Diagram

Root Cause:

The issue occurred due to a missing or improper null check for the Median value during the layout arrangement of nodes and connectors. This oversight led to an index out of range error when the system attempted to access a non-existent element in the data structure.

Best Regards,
Jawin