Example of undefined in React Diagram Component

/
/
TreeViewSample

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.

More Details...

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
Plant ManagerProductionManagerControl RoomForeman1CraftPersonnel5CraftPersonnel6Plant OperatorForeman2CraftPersonnel7AdministrativeOfficerMaintenanceManagerElectricalSupervisorCraftPersonnel1CraftPersonnel2MechanicalSupervisorCraftPersonnel3CraftPersonnel4
Description

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.