• Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 Dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Bootstrap v4
  • High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Localization
*Translated by Google Translator.
Currency
Essential Studio
HOME
All Controls

Example of Data Binding with Treeview in ASP.NET Core Diagram Control

This example illustrates how to create a tree view and a diagram with a datasource. It provides support for selecting, adding, deleting, dragging and dropping, and editing annotations of the nodes during runtime. These actions will be reflected in the corresponding nodes of the tree view component.

DEMO
SOURCE
Diagram Binding with Treeview

When a node is added or removed in a Diagram during runtime, the added or removed node is reflected in the tree view component. When an annotation in the diagram is changed it should also be updated in the treeView by using treeview updateNode method. When editing a text in a treeview, use selectedItems to update it in the diagram. You can drag text from the treeview and drop it onto the node in the diagram. Also, you can perform drag and drop operations in the diagram.

To change the orientation of the tree, click the templates that are added to the property panel.

Injecting Module

Diagram component's features are segregated into individual feature-wise modules. To generate diagrams from an external data source, we need to Inject DataBinding module using Diagram.Inject(DataBinding) method. To automatically arrange the objects in a hierarchical structure, we need to Inject ComplexHierarchicalTree module using Diagram.Inject(ComplexHierarchicalTree) method.

Transform your ASP.NET Core web apps today with Syncfusion ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE