Create Family Tree Diagram

[Uwe Hein]

Hi everybody,

  I want to display AI generated family data in a diagram with Syncfusion looking like this:

 

Is it possible to style the connectors and nodes with code to achieve the same impression ?

TIA

  regards

    Uwe

[Balavignesh RaviChandran]

Hi Uwe,

Yes, it is possible to style the connectors and nodes programmatically to achieve the desired appearance. You can apply styles to the nodes and connectors rendered from a data source using the NodeCreating and ConnectorCreating event callback methods.

These events allow you to customize the properties of nodes and connectors before they are rendered. You can modify aspects like shape, color, stroke width, and more.

For detailed guidance on how to customize your nodes and connectors, please refer to the following documentation:

• Node Customization:https://blazor.syncfusion.com/documentation/diagram/nodes/customization#how-to-update-values-in-common-to-all-nodes
• Connector Customization:https://blazor.syncfusion.com/documentation/diagram/connectors/customization#how-to-customize-the-connector-appearance

Let us know if you need further assistance!

Regards,
Balavignesh

[Uwe Hein]

Hi ​ Balavignesh,

  thank you for the fast answer. Is it possible to provide some code to start with. I am quite new to diagrams and there is an overwhelming amount of sample code.

  TIA

    regards

      Uwe

[Balavignesh RaviChandran]

Here we have provided a simple sample for creating an OrgChart layout and customizing the nodes and connector with the NodeCreating and ConnectorCreating event call back.
Here’s the syntax for the NodeCreating and ConnnectorCreqating event call back.

<SfDiagramComponent  NodeCreating="@NodeCreating"    ConnectorCreating="@ConnectorCreating">

</SfDiagramComponent>

@code

{

    private void NodeCreating(IDiagramObject obj)

    {

    

    }

    private void ConnectorCreating(IDiagramObject obj)

    {

    

    }

}

Let us know if you need further assistance!

Attachment: OrgChartLayout_9f5bbf52.zip

[Uwe Hein]

Thank you,

  gives me a starting point ...

   regards

     Uwe

[Uwe Hein]

Hi,

 I was successful creating the desired nodes and connectors like this:

What must I do to move Husband down one line programmatically to have the same level as wife ?

See attached code sample:

 Is this the correct way to go for my goal or are there better solutions ?

  Thank you

     regards

       Uwe

Attachment: ComplexHierarchicalTree_b2b99887.zip

[Balavignesh RaviChandran]

To move the "Husband" node down one level to be on the same level as "Wife," the expected behavior is that root nodes without parents are usually placed on the same level. We are currently validating other solutions and will provide updates by October 10, 2024. Thank you for your patience!

[Uwe Hein]

Thanks - looking forward.

    regards

      Uwe

[Balavignesh RaviChandran]

Thank you for your message. We are still actively validating the issue and exploring potential solutions to move the "Husband" node down one level. We will provide further updates as soon as possible. We appreciate your continued patience and understanding!

Regards,
Balavignesh

[Balavignesh RaviChandran]

Reported issue: Cannot move the "Husband" node down one level has been resolved.

 

Thank you for your patience. We are pleased to inform you that the reported issue has been resolved and included it in our weekly NuGet update Please upgrade to the latest version, v27.1.53. packages of diagram to resolve this issue.

 

https://www.nuget.org/packages/Syncfusion.Blazor.Diagram

Root Cause: The root cause of the problem was that, instead of creating a copy of the root nodes, a reference was created. As a result, when the startNodes list was cleared one by one, there were no nodes remaining to perform a deep search for finding child nodes.

Please feel free to reach out if you encounter any other concerns or need further assistance.

Regards,
Balavignesh

[Uwe Hein]

Thank you - will give it a try.

   regards

      Uwe

[Preethi Rajakandham]

Hi Uwe Hein,

You're welcome. Please review the provided fix and let us know your thoughts. We look forward to your response.

Regards,

Preethi R

[Uwe Hein]

It is working - Thank you !!

     regards

         Uwe

[Preethi Rajakandham]

Hi Uwe Hein,

You're welcome. We are glad to know that the reported problem has been resolved. We are marking this thread as solved. Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,

Preethi R