Multiple diagram in one page and NodeTemplate scope

[Nicolas Navier]

Hi,
I have a peculiar issue with the Diagram (classic) component. Lets say I have the following in my page :

<SfDiagram @ref="diagramProjectOther" Height="790px" ModelType="@model" Nodes="@NodeContentPodsCollection" Connectors="@ConnectorPodsCollection" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValue">

           ...

            <DiagramTemplates>

                <NodeTemplate>

   var noeudPod = context as Node;

...

  </NodeTemplate>

            </DiagramTemplates>

        </SfDiagram>

Then in the same page the following :

 <SfDiagram @ref=diagramProjectDirection ID="diagramProjectDirection" Height="590px" ModelType="@model" Nodes="@NodeProjectDirectionEmployeesAndTeams" Connectors="@ConnectorProjectDirectionEmployeesAndTeams" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValue">

           ...

            <DiagramTemplates>

                <NodeTemplate>

var noeudDirection = context as Node;

</NodeTemplate>

            </DiagramTemplates>

        </SfDiagram>

@code{

public Type model = typeof(Node);

    public class Node

    {

        public string Id { get; set; }

        public double Width { get; set; }

        public string Data { get; set; }

    }

...

}

When the page loads, I found out that the value returned by  (context as Node​) is not constrained to the values of the node contained in the node collection of the diagram, is that intended ? 

I would have thought that the context of the node was always linked to the collection of node within the parent diagram.

I have some odd behaviors because of that. 

Regards, 

[Sivakumar Sekar]

Hi Nicolas, 

We are validating your requirements and update you with more details in two business days (November 15^th, 2021). We appreciate your patience until then. 

Regards, 

Sivakumar   

[Sivakumar Sekar]

Hi Nicolas, 

Reported Issue: Template is not updated properly while render multiple diagram in same page 

We can reproduce the issue and confirm this as a defect. We have logged a defect report for this issue. We will fix this issue and provide the patch on the December 7th, 2021 weekly patch release.    

    

Feedback link: https://www.syncfusion.com/feedback/30380/template-is-not-updated-properly-while-render-multiple-diagram-in-same-page  

Regards, 

Sivakumar   

[Nicolas Navier]

Thanks I will wait for the patch in December then.

Regards,

--Nicolas

[Sivakumar Sekar]

Hi Nicolas, 

Most Welcome. Thanks for your update.  

Regards, 

Sivakumar    

[Nicolas Navier]

Hi Sivakumar,

Am I doing something wrong ? I upgraded my version with the latest one, however when I start my project, now all I have is this error :

Microsoft.JSInterop.JSException: Failed to fetch dynamically imported module: https://localhost:44393/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-01e037.min.js

TypeError: Failed to fetch dynamically imported module: https://localhost:44393/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-01e037.min.js

   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)

   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)

   at Syncfusion.Blazor.Internal.SfBaseUtils.ImportScripts(IJSRuntime jsRuntime, String modulePath)

   at Syncfusion.Blazor.Internal.SfBaseUtils.ImportModules(IJSRuntime jsRuntime, List`1 scriptModules, String hashKey)

   at Syncfusion.Blazor.SfBaseExtension.OnInitRenderAsync()

   at Syncfusion.Blazor.SfBaseExtension.InitComponent()

   at Syncfusion.Blazor.SfBaseExtension.OnAfterRenderAsync(Boolean firstRender)

   at Syncfusion.Blazor.Diagrams.SfDiagram.OnAfterRenderAsync(Boolean firstRender)

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

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'byJxwesy40QY1aADn2PtYZbUe3kTnG8EycbYvygcHr8'.

Regards,

Nicolas

[Aravind Ravi]

Hi Nicholas, 

We have created a simple sample to show multiple diagrams with HTML template. The sample has been rendered properly without any issues. Please refer to the below screenshot 

 

We suspect that issue occurs due to diagram scripts does not gets loaded properly. Please upgrade to the diagram packages to 19.3.56 version to resolve the issue. We have attached a sample in 19.3.56 package. Please find the sample in the below link 

Sample: https://www.syncfusion.com/downloads/support/forum/170298/ze/Multiple-Diagrams-1055879975 

Regards 

Aravind Ravi

[Nicolas Navier]

Hi  Aravind, 

Why can't I see an update to the component Diagram 

It seems that I can't go higher than 19.3.0.44

I can update the other components with no problems but this one seems stuck to 19.3.0.44

Are you stopping support for the Blazor.Diagrams component or should I try the Blazor.Diagram one ? 

If I do that I am afraid I might have to rewrite some of my code

I had individually included a set of components to my solution, should I replace all of them by syncfusion.Blazor ?

Thanks,

--Nicolas

[Aravind Ravi]

Hi Nichols, 

 

We want to let you know we have implemented diagram control in Blazor native with the minimum set of features. So, we have decided to remove the classic diagram components from the NuGet package. The latest version of the classic component is not placed in the NuGet package manager and it will be deprecated in the future.
To get the updated classic version we suggest you to use the following command to upgrade the classic diagrams package to the latest version. 

 

Open the console in Visual Studio using the Tools > NuGet Package Manager > Package Manager Console command. 

 

Update-Package Syncfusion.Blazor.Diagrams -Version 19.3.0.56 

 

We have added the documentation for the native blazor diagram component for your reference. 

 

Documentation link: https://blazor.syncfusion.com/documentation/diagram-component/getting-started 

 

Please let us know if you have any concerns. 

 

Regards,
Aravind Ravi 

[Nicolas Navier]

Hi Aravind,

Here is my list of dependencies :

I targeted for each component the version  19.3.0.56 

I am getting the error :

Here is an example of how I have my diagram setup :

<SfDashboardLayout @ref="layoutDiag" CellSpacing="@(new double[]{15 ,15 })" CellAspectRatio="2" Columns="5" AllowDragging="false">

                <DashboardLayoutPanels @ref="dashBoardPanels">

                    @if (isDirectionLoaded)

                    {

                        <DashboardLayoutPanel Column="0" SizeX="5" SizeY="2" Id="panelDirection">

                            <HeaderTemplate><div>Direction</div></HeaderTemplate>

                            <ContentTemplate>

                                <SfDiagram @ref=diagramProjectDirection ID="diagramProjectDirection" Height="490px" ModelType="@model" Nodes="@NodeProjectDirectionEmployeesAndTeams" Connectors="@ConnectorProjectDirectionEmployeesAndTeams" NodeDefaults="@NodeDefaults" ConnectorDefaults="@ConnectorDefaults" Layout="@LayoutValue">

                                    <DiagramSnapSettings Constraints="@snapConstraints">

                                        <HorizontalGridlines LineColor="blue" LineDashArray="2,2">

                                        </HorizontalGridlines>

                                        <VerticalGridlines LineColor="blue" LineDashArray="2,2">

                                        </VerticalGridlines>

                                    </DiagramSnapSettings>

                                    <DiagramTemplates>

                                        <NodeTemplate>

                                            @{

                                                var noeudDirection = context as Node;

                                                if (listeNodesDirection.Where(x => x.Contains(noeudDirection.Data.Split("|")[0])).Any())

                                                {

                                                    if (noeudDirection.Data.Contains("|"))

                                                    {

                                                        <SfCard ID="@(noeudDirection.Id)" CssClass="@(noeudDirection.Data.Contains("xxx") ? "xxxx" : "")">

                                                            <CardHeader Title="@(noeudDirection.Data.Split("|")[0])" SubTitle="@(noeudDirection.Data.Split("|")[2])" ImageUrl="@noeudDirection.Data.Split("|")[1]" />

                                                            @if (noeudDirection.Data.Split("|").Count() > 3)

                                                            {

                                                                <CardContent Content="@("xxx" + noeudDirection.Data.Split("|")[3] + "%")" />

                                                            }

                                                        </SfCard>

                                                    }

                                                    else if (noeudDirection.Data.Contains("*"))

                                                    {

                                                        <SfCard ID="@(noeudDirection.Id)">

                                                            <CardHeader Title="@(noeudDirection.Data.Split("*")[0])" ImageUrl="@("xxx") />

                                                        </SfCard>

                                                    }

                                                    else

                                                    {

                                                        <SfCard ID="@(noeudDirection.Id)">

                                                            <CardHeader Title="@(noeudDirection.Data)" SubTitle="@((context as Node).Data)" ImageUrl="xxx" />

                                                        </SfCard>

                                                    }

                                                }

                                            }

                                        </NodeTemplate>

                                    </DiagramTemplates>

                                </SfDiagram>

                            </ContentTemplate>

                        </DashboardLayoutPanel>

I will give it a go with your sample, see if I can build up on that, and find out where the issue I am facing could be.

I also tried with all the components set to  19.3.0.57 (only the diagram component was set to  19.3.0.56 ), and I had the same issue.

I did not have that issue with the version 19.3.0.44.

I will be off for 3 weeks so I'll catch up later.

Thanks,

--Nicolas 

[Aravind Ravi]

Hi Nicolas, 

Could you please confirm whether the issue occurs when you try to render multiple diagram or single diagram with template. When we try to check the diagram with HTML template has been run properly without any issues.  We cannot able to run the provided sample as it has shows error of noedudirection of undefined . So please share us a simple runnable sample illustrating issue. This would help us to serve you better. 

Regards 

Aravind Ravi 

[Nicolas Navier]

Hi Aravind, the new release seems to be working fine. The context is no longer mixed up and I can load multiple diagrams in one page.

Thanks

[Aravind Ravi]

Hi Nicolas, 

Thanks for your update 

Regards 

Aravind Ravi