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

Complex Hierarchy Graph in node/auto sizing

Hi,

I have two question:

  1. Is it possible to put something else inside an annotation content than text? For example: I want to show a network of computers. In the nodes there should be the available disk space. To display this it would be great if I could show a bar thats filled depending on the free space. Like this
  2. Is it possible to automatically size a node? In the above example I don't always know how long the computers name is and I don't want it to have a line break.

Thank you for your help

3 Replies

SU Sumathi Uthayakumar Syncfusion Team December 5, 2022 02:20 PM UTC

Hi Simon,


Please find the response below



Query

Response

Is it possible to put something else inside an annotation content than text? For example: I want to show a network of computers. In the nodes there should be the available disk space. To display this it would be great if I could show a bar thats filled depending on the free space. Like this

You can achieve your requirement by using the NodeTemplate property of DiagramTemplates. It Represents a section of the UI that will be rendered for a node. We have shared our online UG link for your reference. Also, we have shared our online demo for your reference.

 

UG link: https://blazor.syncfusion.com/documentation/diagram/shapes#html-template-shape

Demo: https://blazor.syncfusion.com/demos/diagramcomponent/nodetemplate?theme=fluent

Is it possible to automatically size a node? In the above example I don't always know how long the computers name is and I don't want it to have a line break.

 

There is no way to automatically size a node. In the NodeCreating Event, you should always define the size of the node by using the Height and Width properties of the node.





















Regards,

Sumathi U.



SB Simon Balling December 5, 2022 06:47 PM UTC

What is the difference between the Nodes parameter in the SfDiagramComponent and the DataSourceSettings?

It seems to me like I cant create a Node Template if I use the DataSourceSettings. Is this correct?



SU Sumathi Uthayakumar Syncfusion Team December 6, 2022 08:48 AM UTC

Simon,




Query

Response

What is the difference between the Nodes parameter in the SfDiagramComponent and the DataSourceSettings?

 

We suspect you inquired about nodes in SFDiagramComponent. That is, it is defined as a collection of node objects used to visualise geometrical data.

 

The information provided in the data source settings is object model data. We used this object model data and created nodes internally. The created nodes are added to the nodes collection and rendered visually in the Diagram canvas.

 

It seems to me like I cant create a Node Template if I use the DataSourceSettings. Is this correct?

Even if you used data source settings, you can create a Node template. For your reference, we have provided a sample of our online demo.

 

Demo: https://blazor.syncfusion.com/demos/diagramcomponent/organization-model?theme=fluent

 


Loader.
Up arrow icon