Configures a connection (line or arrow) between shapes in the Diagram. Connections visually represent relationships and can include customizable styling, caps, routing, and interactive behaviors. Use this descriptor to define connection appearance, endpoints, labels, and user interaction settings.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Syntax:
public class DiagramConnectionDescriptor : DataVizCollectionItemComponentDescriptorInheritance: objectDataVizChildComponentDescriptorDataVizCollectionItemComponentDescriptorDiagramConnectionDescriptor
Constructors
public DiagramConnectionDescriptor()Properties
Configures the content (label) displayed on the connection line. Use the DiagramConnectionContentDescriptor to set text, position, font styling, and other label properties. Example: Display "Approved" text on a connection between workflow steps.
public DiagramConnectionContentDescriptor Content { get; set; }Controls which aspects of the connection can be edited by users through drag-and-drop interactions. Configure using DiagramConnectionEditableDescriptor to enable or disable editing of connection endpoints, routing points, and other properties.
public DiagramConnectionEditableDescriptor Editable { get; set; }Defines the visual appearance of the arrow or cap at the end (target) of the connection. Use DiagramConnectionEndCapDescriptor to set the cap type (arrow, circle, none), fill color, stroke, and anchor position. Common usage: Set to ArrowEnd to show directional flow.
public DiagramConnectionEndCapDescriptor EndCap { get; set; }Specifies the exact starting coordinates or source shape details for the connection origin. Use DiagramConnectionFromDescriptor to set X/Y coordinates when connecting to a specific point rather than a shape. Typically used with FromId or FromConnector for shape-based connections.
public DiagramConnectionFromDescriptor From { get; set; }Specifies which connector point on the source shape the connection should attach to. Available options: Top, Bottom, Left, Right, or Auto. Requires FromId to be set to identify the source shape. Example: Set to Bottom to connect from the bottom of the source shape.
public DiagramConnectionsFromConnector? FromConnector { get; set; }Identifies the source shape by its unique ID from which this connection originates. Must match the Id of an existing shape in the diagram. Works together with FromConnector to specify the exact attachment point on the shape. Example: Set to "shape-1" to connect from the shape with Id="shape-1".
public string FromId { get; set; }Configures the visual appearance of the connection when users hover over it with the mouse. Use DiagramConnectionHoverDescriptor to define hover-specific stroke color, width, and dash patterns. Provides visual feedback to users indicating the connection is interactive.
public DiagramConnectionHoverDescriptor Hover { get; set; }Sets a unique identifier for this connection, used to distinguish it from other connections in the diagram. Required when you need to programmatically reference, update, or remove specific connections. Should be unique across all connections in the diagram. Example: Set to "workflow-approval-connection" for easy identification in code.
public string Id { get; set; }Defines intermediate waypoints that control the path routing of the connection between source and target. Use DiagramConnectionPointDescriptor to add custom routing points with X/Y coordinates. Allows creating non-straight connections that route around obstacles or follow specific paths.
public List<DiagramConnectionPointDescriptor> Points { get; set; }Configures the visual appearance of the connection when selected by users. Use DiagramConnectionSelectionDescriptor to customize selection handles, colors, and interaction behavior. Selection state is activated when users click on the connection.
public DiagramConnectionSelectionDescriptor Selection { get; set; }Defines the visual appearance of the arrow or cap at the start (source) of the connection. Use DiagramConnectionStartCapDescriptor to set the cap type (arrow, circle, none), fill color, stroke, and anchor position. Common usage: Set to ArrowStart for bi-directional flow visualization.
public DiagramConnectionStartCapDescriptor StartCap { get; set; }Configures the line style and appearance of the connection path. Use DiagramConnectionStrokeDescriptor to set line color, width, and dash pattern (solid, dashed, dotted). Example: Set color to "#0078D4" and width to 2 for a prominent blue connection line.
public DiagramConnectionStrokeDescriptor Stroke { get; set; }Specifies the exact ending coordinates or target shape details for the connection destination. Use DiagramConnectionToDescriptor to set X/Y coordinates when connecting to a specific point rather than a shape. Typically used with ToId or ToConnector for shape-based connections.
public DiagramConnectionToDescriptor To { get; set; }Specifies which connector point on the target shape the connection should attach to. Available options: Top, Bottom, Left, Right, or Auto. Requires ToId to be set to identify the target shape. Example: Set to Top to connect to the top of the destination shape.
public DiagramConnectionsToConnector? ToConnector { get; set; }Identifies the target shape by its unique ID where this connection terminates. Must match the Id of an existing shape in the diagram. Works together with ToConnector to specify the exact attachment point on the destination shape. Example: Set to "shape-2" to connect to the shape with Id="shape-2".
public string ToId { get; set; }Configures tooltip content that appears when users hover over the connection. Use DiagramConnectionTooltipDescriptor to customize tooltip text, styling, and positioning. Helpful for displaying additional information like connection metadata, weights, or descriptions.
public DiagramConnectionTooltipDescriptor Tooltip { get; set; }Controls the routing algorithm used to draw the connection path between shapes. Polyline creates straight lines with right angles (default) - best for structured diagrams and flowcharts. Cascading creates smooth curved connections - best for organic layouts and data flow diagrams. The routing algorithm automatically adjusts the path when shapes are moved or resized.
public DiagramConnectionType? Type { get; set; }