Example of Treeview component in Blazor Diagram Component

Diagram / Real-time Diagrams / Diagram Binding With TreeView

This sample illustrates how to create a tree view and diagram with a data source. This sample provides support for selecting, adding, deleting, expanding, collapsing, and editing the annotations of the nodes during runtime. These actions will replicate in the corresponding nodes of the TreeView component.

Loading Syncfusion Blazor Server Demos…

Diagram Binding With TreeView

Plant Manager
- Production Manager
  - Control Room
    - Foreman1
      - Craft Personnel5
      - Craft Personnel6
  - Plant Operator
    - Foreman2
      - Craft Personnel7
- Administrative Officer
- Maintenance Manager
  - Electrical Supervisor
    - Craft Personnel1
    - Craft Personnel2
  - Mechanical Supervisor
    - Craft Personnel3
    - Craft Personnel4

In Diagram, the Selection operation is achieved with the Select method. In TreeView, it is achieved with the selectedNodes property. When a node is added or removed in Diagram during runtime, the AddedNodes or RemoveNodes methods will also add or remove the relevant nodes in the TreeView component. The ExpandAllAsync() and CollapseAllAsync() functions will expand or collapse the necessary nodes in the TreeView component whenever a node in the corresponding Diagram is expanded or collapsed during runtime.