ZIndex order of Nodes and connectors with template node

[Michael Aston]

Hi,

I'm having a problem with templated nodes and connectors. The templated node always appears over the connectors. I've tried putting a port in the centre of the templated node but this does help. I've also tried change the ZIndex but without any effect. Do you have a sample that uses a templated node with connectors that you could share?

[Rajeswari Pounraj]

Hi Michael,

We were able to reproduce the issue with "The templated node always appears over the connectors" We are currently validating the issue and will provide additional information on October 13, 2022.

Regards,

Rajeswari

[Ralf]

Hi Rajeswari,

we have the same issue. Changing the Z-Order works fine for BasicShapes but doesn't work for shapes of type html (using a node template).

Regards,

Ralf

[Ralf]

Here is an example, showing the problem

Attachment: SfDiagramZOrder_f956e333.7z

[Rajeswari Pounraj]

Hi Michael/Ralf,

By default, we have rendered the HTML nodes inside the HTML layer in the diagram. Please refer to the below screenshot

We have rendered all other nodes and connectors inside the diagram layer. Please refer to the below screenshot

In our end, first we append the diagram layer in the diagram and then we append the HTML layer after the diagram layer. So the normal nodes and connectors render behind the HTML nodes. If we render the connector from the HTML node(Center of the node) means then it gets rendered behind the HTML node and does not gets visible. This is the default behavior of the diagram layers.

Note: Z-Order commands will not support HTML nodes in the diagram.

Regards,

Rajeswari

[Ralf]

Hi Rajeswari,

maybe my example was misleading. I don't need to mix BasicShape nodes together with Html nodes (not shure about Michael).

All of my nodes in the diagram are Html nodes and as you mentioned, they should be in the same layer.

So I just need a visual change of the z-order for HtmlNodes (in my example between the two html shape nodes) using your z-order commands. In my opinion this is a bug and this should work.

Regards,

Ralf

[Michael Aston]

Hi Rajeswari,

Same for me. The issue is not overlapping nodes but rather that the HTML nodes overlays the connectors. We need a way for the connectors to overlay the HTML nodes.

Ideally, I want to define a port on part of the HTML node (the edge of the radar chart) and get the connector to visibly connect to it.

Can't we have a separate HTML node connector in the same layer as the HTML nodes? Without this the templated HTML node has little value.

Michael

[Rajeswari Pounraj]

Hi Ralf,

We were able to reproduce the issue with "z-order doesn't work for html shapes" We are currently validating the issue and will provide additional information on October 20, 2022.

Regards,

Rajeswari

[Rajeswari Pounraj]

Hi Michael,

As stated in our previous update, connectors will render in diagram layer and HTML nodes will render in the HTML layer, so the HTML nodes overlays the connector. We cannot move connector to the HTML layer, it contains template nodes only.

You can position the port on the edge of the HTML node and connect the node by using port, this will resolve the issue. You can achieve this by using port's offset property. Please refer to the following code snippet.

Ports = new DiagramObjectCollection<PointPort>()
            {
                new PointPort()
                {
                    ID = "port1",
                    // Sets the offset for the port.
                    Offset = new DiagramPoint() { X = 0, Y = 0.5 },
                    Visibility = PortVisibility.Visible,
                    Shape = PortShapes.Square
                }
            }

For more details about positioning of the port on the node please refer to the following link
https://blazor.syncfusion.com/documentation/diagram/ports/positioning

Regards,

Rajeswari

[Rajeswari Pounraj]

Hi Ralf,

We have confirmed that the reported issue is a bug and have logged defect report regarding this. We will fix the issue and include the fix in our upcoming weekly nuget release which is scheduled to be rolled out on oct 26, 2022. We appreciate your patience until then.

Meanwhile, you can track the status of the bug from the following link.

Feedback Link: https://www.syncfusion.com/feedback/38567/z-order-commands-not-working-for-html-node

Regards,
Rajeswari

[Sumathi Uthayakumar]

Hi Ralf,

We have fixed the reported issue  “Z-Order commands not working for HTML node” and included the fix in our weekly patch release(v20.3.0.52). 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

Please let us know if you need any further assistance.

Regards,

Sumathi U

[Ralf]

Hi Sumathi ,

thanks for fixing it. Works fine for me and my problem is solved with this fix.

Regards,

Ralf