We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

ZIndex order of Nodes and connectors with template node

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?








11 Replies 1 reply marked as answer

RP Rajeswari Pounraj Syncfusion Team October 10, 2022 08:18 AM

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



RA Ralf replied to Rajeswari Pounraj October 12, 2022 06:59 AM

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



RA Ralf October 12, 2022 07:01 AM

Here is an example, showing the problem


Attachment: SfDiagramZOrder_f956e333.7z


RP Rajeswari Pounraj Syncfusion Team October 13, 2022 05:11 AM

Hi Michael/Ralf,


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

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

imageIn 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




RA Ralf replied to Rajeswari Pounraj October 14, 2022 02:00 AM

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



MA Michael Aston replied to Ralf Trabhardt October 14, 2022 07:38 AM

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




RP Rajeswari Pounraj Syncfusion Team October 17, 2022 10:03 AM

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



RP Rajeswari Pounraj Syncfusion Team October 17, 2022 10:13 AM

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



RP Rajeswari Pounraj Syncfusion Team October 20, 2022 03:28 AM

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



SU Sumathi Uthayakumar Syncfusion Team October 27, 2022 08:21 AM

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


Marked as answer

RA Ralf November 11, 2022 03:13 AM

Hi Sumathi ,


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


Regards,

Ralf


Loader.
Live Chat Icon For mobile
Up arrow icon