ControlNode Class

Represents diagram nodes which can display custom HTML content.

Namespace: MindFusion.Diagramming.WebForms
Package: MindFusion.Diagramming.WebForms

 Syntax

C#

public class ControlNode : DiagramNode

Visual Basic

Public Class ControlNode
    Inherits DiagramNode

 Remarks

ControlNode objects display custom HTML content, specified via their Template property. A node's DOM structure is created inside the Content div element, which is then rendered on top of the diagram canvas. Note that this prevents ControlNodes drawing in diagram' usual Z order, and they will always appear on top of other diagram items.

By default the diagram intercepts mouse events of all hosted html elements to enable moving nodes or drawing links. You can specify that interactive elements, such as buttons or text boxes, should receive input instead by setting their data-interactive attribute to true.

You can register event handlers for elements in the template by assigning function names to data-event attributes in the form data-event-'eventName'='handlerName'. Alternatively, you can attach event listeners using DOM API once NodeDomCreatedScript is called to signify that content is available. E.g. access child elements by calling args.getNode().getContent().querySelector(...) and attach handlers via elements' addEventListener method.

ControlNodes create DOM elements from their template only in the main diagram, and render images instead when shown in Overview or NodeListView. Note that in this case image elements in the template will render only if specified in base64 format. The Utils.toDataUrl method helps you convert an image URL to base64 data URL.

 Inheritance Hierarchy

System.Object
    MindFusion.Diagramming.DiagramItem
        MindFusion.Diagramming.DiagramNode
            MindFusion.Diagramming.WebForms.ControlNode