The diagram will not display the data when the page is loaded

[Felix Feja]

Hi,

we use a DiagramComponent into which we load data from the database. After loading the page, the diagram does not always display nodes and connectors. Sometimes it's enough to refresh the page, but sometimes it doesn't help.

<SfDiagramComponent @ref="@_diagram"
                    Width="100%"
                    Height="600px"
                    Nodes="@_nodes"
                    Connectors="@_connectors"
                    SelectionSettings="@_selectedModel"
                    GetCustomTool="@GetCustomTool"
                    SelectionChanged="@OnSelectionChanged"
                    TextChanged="@OnTextChanged">
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

protected override async Task OnInitializedAsync()
    {
        this._userHandles = new DiagramObjectCollection<UserHandle>
            {
                new()
                {
                    Name = "DrawConnector",
                    PathData = "M3.9730001,0 L8.9730001,5.0000007 3.9730001,10.000001 3.9730001,7.0090005 0,7.0090005 0,2.9910006 3.9730001,2.9910006 z",
                    Visible = true,
                    Offset = 0.5,
                    Side = Direction.Right,
                    Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }
                }
            };
        this._selectedModel = new DiagramSelectionSettings
        {
            Constraints = SelectorConstraints.All & ~SelectorConstraints.ResizeAll,
            UserHandles = this._userHandles
        };
        await this.GetData();
    }

   

private async Task GetData()
    {
        var i = 1;
        var nodes = new DiagramObjectCollection<Node>();
        var connectors = new DiagramObjectCollection<Connector>();

        this.Route = await this.LogisticRouteAppService.GetAsync(this.Id);

        foreach (var point in this.Route.Points)...
        foreach (var c in this.Route.Connectors)...

        this._nodes = nodes;
        this._connectors = connectors;
        this._connectors.CollectionChanged += ConnectorsOnCollectionChanged;
    }

Correct one

After refresh (incorrect) We have a problem with loading connectors (the last connector is not displayed correctly)

sometimes it doesn't show up at all

I noticed through inspect (in browser) that the elements are not rendered. However, if I know where the element is and I go there with the cursor and do Drag & Drop  (the element's border will appear)  

then after drop the diagram will be displayed

I think the problem is with "async". Because if I use the example from your documentation (https://blazor.syncfusion.com/documentation/diagram/getting-started#add-blazor-diagram-component ), but I will render it in "OnInitializedAsync" not "OnInitialized" and at the beginning I will give Task.Delay, so the diagram will not correctly render the connectors.

 protected override async Task OnInitializedAsync()
    {
        await Task.Delay(1000);

        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
        CreateNode("Init", 300, 140, NodeFlowShapes.Process, "var i = 0");
        CreateNode("Condition", 300, 230, NodeFlowShapes.Decision, "i < 10?");
        CreateNode("Print", 300, 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
        CreateNode("Increment", 300, 410, NodeFlowShapes.Process, "i++;");
        CreateNode("End", 300, 500, NodeFlowShapes.Terminator, "End");
        // Creates orthogonal connector.
        OrthogonalSegment segment1 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Direction = Direction.Right,
            Length = 30,
        };
        OrthogonalSegment segment2 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 300,
            Direction = Direction.Bottom,
        };
        OrthogonalSegment segment3 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 30,
            Direction = Direction.Left,
        };
        OrthogonalSegment segment4 = new OrthogonalSegment()
        {
            Type = ConnectorSegmentType.Orthogonal,
            Length = 200,
            Direction = Direction.Top,
        };
        CreateConnector("Start", "Init");
        CreateConnector("Init", "Condition");
        CreateConnector("Condition", "Print");
        CreateConnector("Condition", "End", "Yes", segment1, segment2);
        CreateConnector("Print", "Increment", "No");
        CreateConnector("Increment", "Condition", null, segment3, segment4);
}

Please, have you encountered this or am i doing something wrong?

Thanks for help

[Felix Feja]

I will add that we use

Syncfusion.Blazor.Diagram Version="20.2.0.49" 

[Sumathi Uthayakumar]

Hi Felix,

We investigated the reported problem in the shared sample (from the UG documentation link that you provided). We added a delay to the OnInitializedAsync() Method and got the same result. The asynchronous method OnitializedAsync() is called when the component is initialized. The diagram component was not properly initialized when you used Delay in the OnInitializedAsync() lifecycle method. As a result, the connectors are not rendered correctly. We fixed this problem by adding nodes with annotations and connectors with annotations using the AddDiagramElements() method in the OnAfterRenderAsync() method with the same delay as in the OnInitializedAsync() method. At our end, the diagram is now properly rendered. We have provided a sample for your use. In addition, we have shared our Online UG link for your convenience.

UG link: https://blazor.syncfusion.com/documentation/diagram/nodes/nodes#add-node-with-annotations-at-runtime

https://blazor.syncfusion.com/documentation/diagram/connectors/connectors#add-connector-with-annotations-at-runtime

To resolve the reported issue, you will need to add nodes with annotations and connectors with annotations after retrieving the database using the AddDiagramElements() method. If you are still experiencing this issue, please share a replicated sample and video for our reference.

Regards,

Sumathi U.

Attachment: Forum180047_c62f2b23.zip

[Felix Feja]

Hi,

Thanks, rendering now works correctly.

But the problem arises if an event is triggered (for example, if I move a component or edit the text). The change will not be reflected, or the flood diagram is loaded again. If I use the "firstRender" variable from "OnAfterRenderAsync", the diagram is loaded empty.

<SfDiagramComponent @ref="@_diagram"
                    Width="100%"
                    Height="600px"
                    Nodes="@_nodes"
                    Connectors="@_connectors"
                    SelectionSettings="@_selectedModel"
                    GetCustomTool="@GetCustomTool"
                    SelectionChanged="@OnSelectionChanged"
                    TextChanged="@OnTextChanged"
                   >
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            base.OnAfterRender(firstRender);
            await this.GetData();
        }
    }

Is there a way to correctly do this? 

[Sumathi Uthayakumar]

Felix,

First and foremost, We can't understand your exact requirements. According to our understanding, we attempted to reproduce the reported issue on our end. In the previously shared sample, we have called “Selectionchanged “ and TextChanged events. We had no problems. In that example, we try to edit the text, and it is reflected properly. we had no problems on our end. In the previously shared sample, we used the " firstRender" variable, and when we load the diagram, it rendered correctly.

Could you please explain your issue in detail or replicate it in the previously shared sample?

[Felix Feja]

Hi

I am attaching a video about how it behaves in the application

The code is also below

<SfDiagramComponent @ref="@_diagram"
                    Width="100%"
                    Height="600px"
                    Nodes="@_nodes"
                    Connectors="@_connectors"
                    GetCustomTool="@GetCustomTool"
                    SelectionSettings="@_selectedModel"
                    SelectionChanged="@OnSelectionChanged">
</SfDiagramComponent>


 protected override void OnInitialized()
    {
        //await InitDiagramModel();
        this._userHandles = new DiagramObjectCollection<UserHandle>
        {
            new()
            {
                Name = "DrawConnector",
                PathData = "M3.9730001,0 L8.9730001,5.0000007 3.9730001,10.000001 3.9730001,7.0090005 0,7.0090005 0,2.9910006 3.9730001,2.9910006 z",
                Visible = true,
                Offset = 0.5,
                Side = Direction.Right,
                Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }
            }
        };
        this._selectedModel = new DiagramSelectionSettings
        {
            Constraints = SelectorConstraints.All & ~SelectorConstraints.ResizeAll,
            UserHandles = this._userHandles
        };


        SetToolbarItemsAsync();
    }


    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            base.OnAfterRender(firstRender);
            await this.GetData();
        }
    }


 private void OnSelectionChanged(SelectionChangedEventArgs args)
    {
        if (args.NewValue.Count == 1 && args.NewValue[0] is Node)
        {
            this._diagram.SelectionSettings.Constraints |= SelectorConstraints.UserHandle;
            this._diagram.SelectionSettings.Constraints &= ~SelectorConstraints.ResizeAll;
        }
        else if (args.NewValue.Count > 0)
        {
            this._diagram.SelectionSettings.Constraints |= SelectorConstraints.ResizeAll;
            this._diagram.SelectionSettings.Constraints &= ~SelectorConstraints.UserHandle;
        }
    }

In GetData, I add elements to the diagram via

await this._diagram.AddDiagramElements(NodeCollection);

but _nodes and _connectors are empty. (only _diagram.nodes and _diagram.connectors contain elements)

Attachment: screencapture_ca825cfe.zip

[Felix Feja]

Hi,

thanks for the help.

The problem was on our side. In the code, we still had a line at the beginning of the "GetData" method

this._nodes = new DiagramObjectCollection<Node>();

Although it is interesting that it caused a problem, since it was before the actual addition of the elements. But the problem was probably that it was in "OnAfterRenderAsync".

 private async Task GetData()
    {
        this._nodes = new DiagramObjectCollection<Node>();
        CreateNode("Start", 300, 50, NodeFlowShapes.Terminator, "Start");
        await this._diagram.AddDiagramElements(NodeCollection);

After removing everything works.