1. Home
  2. Forum
  3. Blazor
  4. AddDiagramElements fails on second page load

AddDiagramElements fails on second page load

Version: 19.4.0.50

The above function complains of duplicate keys.


Context:

I have a singleton datasource that may be updated on a seperate page, so i would like to redraw the component with existing data on a page.

In my page I call AddDiagramElements fine the first time the page is hit in OnAfterRender ()

On second call, if i dont call this, the diagram is empty. If i do call, it complains of duplicate keys.


Stack Trace

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'yXoqvV-8VHG_sK9WUkTxTbD1CYtbDBSXIsYMmC8HleY'.
      System.ArgumentException: An item with the same key has already been added. Key: C_09B_09A_2
         at System.Collections.Generic.Dictionary`2.TryInsert(TKey key, TValue value, InsertionBehavior behavior)
         at Syncfusion.Blazor.Diagram.Internal.DiagramLayerContent.InitConnector(Connector obj, Boolean independentObj)
         at Syncfusion.Blazor.Diagram.Internal.DiagramLayerContent.InitObject(Object element)
         at Syncfusion.Blazor.Diagram.Internal.DiagramLayerContent.InitLayerObjects()
         at Syncfusion.Blazor.Diagram.Internal.DiagramLayerContent.InitObjects()
         at Syncfusion.Blazor.Diagram.Internal.DiagramLayerContent.LoadDiagram(Boolean isSerialize)
         at Syncfusion.Blazor.Diagram.Internal.DiagramLayerContent.OnScriptRendered()
         at Syncfusion.Blazor.Diagram.SfDiagramComponent.OnAfterScriptRendered()
         at Syncfusion.Blazor.SfBaseComponent.OnAfterRenderAsync(Boolean firstRender)
         at Syncfusion.Blazor.Diagram.SfDiagramComponent.OnAfterRenderAsync(Boolean firstRender)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

The interesting thing to note is the KEY is unique which includes the page load count, eg the _2 on the end of the above indicates the second call to the AddDiagramElements function, and as such.


I have confirmed my elements are not duplicates with:

var distinctElements = elements.Select(e => e.ID).Distinct().ToList();
if(elements.Count != elements.Distinct().Count)
{
    Logger.LogError("Duplicate Nodes Found"); // this never triggers
}

var addTask = NavDiagram.AddDiagramElements(elements);





3 Replies
SS Sivakumar Sekar Syncfusion Team February 15, 2022 11:50 AM UTC

Hi Daniel,  
 
We have added the sample and video link to demonstrate how to redraw the entire diagram elements using AddDiagramElements. While redrawing the same nodes and connectors, you have to clear the nodes and connector collection as shown in the below code. 
 
diagram.ClearSelection(); 
collectionNew = new DiagramObjectCollection<NodeBase>(); 
Connectors.Clear(); 
Nodes.Clear(); 
 
 
If we misunderstood your requirement, please share us more details or replicate the issue in the shared sample. This will be helpful for us to proceed further. 
 
Regards, 
Sivakumar 



DR Daniel Reibelt February 15, 2022 05:47 PM UTC

Thanks for the quick reply, this does clarify some things regarding node add/remove.

Manually pressing the button is  not what im after.


I'm looking to understand how to get the nodes to load automatically each time the page is hit.

First time there may be a lengthy asyncronous data load as described previously with the singleton data source which is also used to render a treegrid on the same page.

Subsequent loads much faster using cache.


Dont really have a sample as your sample is about as far as ive got ( with code that will compile for you to test)


SS Sivakumar Sekar Syncfusion Team February 16, 2022 01:44 PM UTC

On further analysis of the shared query, we suspect that you would like to load the node and connectors after the diagram gets created. We have achieved your requirement using the created event as shown in the below code. If we misunderstood your requirement, please replicate the issue in the shared sample. 
 
<SfDiagramComponent Width="100%" Height="700px" @ref="diagram" Nodes="@Nodes" Connectors="@Connectors" Created="created"> 
    </SfDiagramComponent> 
public async Task created() 
    { 
       await AddElements(); 
    } 
 
 
 


Loader.
Up arrow icon