Class SfDiagramComponent
Represents a comprehensive diagramming component that provides functionality for creating, editing, and rendering interactive diagrams with nodes, connectors, and various diagramming features.
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfDiagramComponent : SfBaseComponent, IDiagramObject, ICloneableRemarks
The SfDiagramComponent serves as the main container for all diagramming operations, including node management, connector routing, layout algorithms, and user interactions.
It handles rendering, event management, serialization, and provides extensive customization options for appearance and behavior.
Key features include drag-and-drop operations, automatic layout algorithms, undo/redo functionality, clipboard operations, and export capabilities to various formats.
Examples
The following example demonstrates how to create and configure a basic diagram component:
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Width="100%">
<DiagramPageSettings>
<DiagramFitOptions CanFit="true" Mode="FitMode.Page"></DiagramFitOptions>
</DiagramPageSettings>
</SfDiagramComponent>
@code {
// Additional configuration can be added here
}Constructors
SfDiagramComponent()
Declaration
public SfDiagramComponent()Properties
BridgeDirection
Gets or sets the direction of the bridge that is inserted when connector segments intersect in the SfDiagramComponent.
Declaration
public Direction BridgeDirection { get; set; }Property Value
| Type | Description |
|---|---|
| Direction | A Direction enumeration value specifying the direction of the bridge when connector segments intersect. The default value is Top. |
Remarks
Bridge direction determines the visual appearance of connector intersections by controlling which direction the bridge arc faces.
Examples
The following example demonstrates how to set the bridge direction for connector intersections.
<SfDiagramComponent Height="900px" Width="1200px" BridgeDirection="Direction.Right" Connectors="@connectors">
</SfDiagramComponent>BridgeDirectionChanged
Gets or sets the callback that is invoked when the bridge direction of the SfDiagramComponent changes.
Declaration
public EventCallback<Direction> BridgeDirectionChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<Direction> | An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the bridge direction is modified. The default value is an empty event callback. |
Remarks
Use this callback to respond to changes in the connector bridge direction and apply related UI updates or business logic.
Examples
The following example demonstrates how to handle the bridge direction change event:
<SfDiagramComponent Height="900px" Width="1200px" BridgeDirectionChanged="@OnBridgeDirectionChanged" />
@code {
private async Task OnBridgeDirectionChanged(Direction newDirection)
{
Console.WriteLine($"Bridge direction changed to: {newDirection}");
// Additional logic for handling direction change
}
}ChildContent
Gets or sets the child content of the SfDiagramComponent.
Declaration
public RenderFragment ChildContent { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.RenderFragment | A Microsoft.AspNetCore.Components.RenderFragment that defines the content of the diagram component. The default value is null. |
Remarks
The ChildContent property allows you to define custom content within the diagram component, such as nodes, connectors, and other diagram elements using Razor markup.
Click
Gets or sets the callback that occurs when a node, connector, or diagram element is clicked in the SfDiagramComponent.
Declaration
public EventCallback<ClickEventArgs> Click { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ClickEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles click interactions on diagram elements. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a diagram element is clicked.
Examples
The following example demonstrates how to assign and handle the click callback:
<SfDiagramComponent Width="1000px" Height="1000px" Click="OnDiagramClick"></SfDiagramComponent>
@code
{
private void OnDiagramClick(ClickEventArgs args)
{
if (args.ActualObject != null)
{
Console.WriteLine("Clicked");
}
}
}CollectionChanged
Occurs when a node or connector is added to or removed from the SfDiagramComponent.
Declaration
public EventCallback<CollectionChangedEventArgs> CollectionChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<CollectionChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles collection change notifications. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever the diagram element collection is changed.
Examples
The following example demonstrates how to handle collection changes in the diagram:
<SfDiagramComponent Width="1000px" Height="1000px" CollectionChanged="@OnCollectionChanged"></SfDiagramComponent>
@code
{
private void OnCollectionChanged(CollectionChangedEventArgs args)
{
if (args.Element != null)
{
}
}
}CollectionChanging
Gets or sets the event callback that is triggered before a node or connector is added to or removed from the SfDiagramComponent.
Declaration
public EventCallback<CollectionChangingEventArgs> CollectionChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<CollectionChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles collection modification operations. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever the diagram elements collection is changing.
Examples
This example demonstrates how to handle the CollectionChanging event to monitor diagram modifications.
<SfDiagramComponent Width="1000px" Height="1000px" CollectionChanging="@OnCollectionChanging"></SfDiagramComponent>
@code
{
private void OnCollectionChanging(CollectionChangingEventArgs args)
{
if (args.Element != null)
{
}
}
}CommandManager
Gets or sets the CommandManager that defines custom commands and binds them with key gestures for the SfDiagramComponent.
Declaration
public CommandManager CommandManager { get; set; }Property Value
| Type | Description |
|---|---|
| CommandManager | A CommandManager object that specifies custom commands and their corresponding key gestures. The default value is null. |
Remarks
The CommandManager property enables the definition of custom keyboard shortcuts and commands that can be executed within the diagram component.
Examples
The following example demonstrates how to configure custom commands with keyboard gestures:
<SfDiagramComponent Height="600px">
<CommandManager Commands="@command"></CommandManager>
</SfDiagramComponent>
@code
{
DiagramObjectCollection<KeyboardCommand> command = new DiagramObjectCollection<KeyboardCommand>()
{
new Command()
{
Name = "CustomGroup",
Gesture = new KeyGesture() { Key = DiagramKeys.G, Modifiers = ModifierKeys.Control }
},
new Command()
{
Name = "CustomUngroup",
Gesture = new KeyGesture() { Key = DiagramKeys.U, Modifiers = ModifierKeys.Control }
},
};
}ConnectionChanged
Gets or sets the event callback that occurs when a connector's source or target point is connected or disconnected from a node or port.
Declaration
public EventCallback<ConnectionChangedEventArgs> ConnectionChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ConnectionChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles connection state changes. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a connector's connection state changes in the diagram.
Examples
The following example demonstrates how to handle connection changes and cancel the operation:
<SfDiagramComponent ConnectionChanged="ConnectionChanged"></SfDiagramComponent>
private void ConnectionChanged(ConnectionChangedEventArgs args)
{
args.Cancel = true;
}ConnectionChanging
Gets or sets the event callback that occurs when a connector's source or target point is about to be connected or disconnected from a node.
Declaration
public EventCallback<ConnectionChangingEventArgs> ConnectionChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ConnectionChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles connection change events. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a connector's connection state is changing in the diagram.
Examples
The following example demonstrates how to handle the ConnectionChanging event to cancel connection changes.
<SfDiagramComponent ConnectionChanging="ConnectionChanging"></SfDiagramComponent>
private void ConnectionChanging(ConnectionChangingEventArgs args)
{
args.Cancel = true;
}ConnectorCreating
Gets or sets the event callback that is invoked when a connector is being created in the SfDiagramComponent.
Declaration
public EventCallback<IDiagramObject> ConnectorCreating { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<IDiagramObject> | An Microsoft.AspNetCore.Components.EventCallback<> that provides access to the connector being created. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a connector is being created in the diagram.
Examples
The following example demonstrates how to use the ConnectorCreating callback to set default properties for connectors.
<SfDiagramComponent ConnectorCreating="@ConnectorCreating"></SfDiagramComponent>
@code
{
private void ConnectorCreating(IDiagramObject obj)
{
}
}Connectors
Gets or sets a collection of Connector objects used to create links between two points, nodes, or ports to represent relationships between them in the SfDiagramComponent.
Declaration
public DiagramObjectCollection<Connector> Connectors { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramObjectCollection<Connector> | A DiagramObjectCollection<T> containing the connector elements. The default value is null. |
Remarks
Each Connector defines connection details such as source/target points, segments, and visual styling. The collection supports straight, orthogonal, and bezier connectors.
Each connector must have a unique ID for proper identification and interaction within the diagram.
Examples
The following example demonstrates how to create and configure connectors in a diagram:
<SfDiagramComponent Height="900px" Connectors="@connectors">
</SfDiagramComponent>
@code
{
public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector connector = new Connector()
{
ID="straight",
SourcePoint = new DiagramPoint() { X = 100, Y = 200 },
TargetPoint = new DiagramPoint() { X = 300, Y = 200 },
Segments = new DiagramObjectCollection<ConnectorSegment>()
{
//Create a new straight segment
new StraightSegment(){Point=new DiagramPoint(420,300)},
}
};
connectors.Add(connector);
}
}ConnectorsChanged
Gets or sets the callback to trigger when the SfDiagramComponent connectors collection changes.
Declaration
public EventCallback<DiagramObjectCollection<Connector>> ConnectorsChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Connector>> | An Microsoft.AspNetCore.Components.EventCallback<> of DiagramObjectCollection<T> that is invoked when connectors are added, removed, or modified. The default value is an empty event callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the connectors collection is modified.
ConnectorSegmentThumb
Gets or sets the settings for customizing the segment thumbs for connector segments in the SfDiagramComponent.
Declaration
public SegmentThumbSettings ConnectorSegmentThumb { get; set; }Property Value
| Type | Description |
|---|---|
| SegmentThumbSettings | A SegmentThumbSettings object that represents the configuration for connector segment thumbs. The default value is null. |
Remarks
Segment thumbs let users drag and adjust connector segments. Orthogonal segments use a rhombus shape; Bezier segments use a circle by default.
Enable this feature by adding DragSegmentThumb to the connector constraints.
To inherit the thumb shape from SfDiagramComponent, also include InheritSegmentThumbShape.
Examples
The following example demonstrates how to configure segment thumb settings with a custom shape and enable them on a connector:
<SfDiagramComponent ConnectorSegmentThumb="@connectorSegmentThumb" Connectors="@connectors"/>
@code {
SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings()
{
Shape = SegmentThumbShapes.Square
};
public DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Connector connector = new Connector()
{
ID = "connector1",
Type = ConnectorSegmentType.Orthogonal,
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape
};
connectors.Add(connector);
}
}ConnectorSegmentThumbChanged
Gets or sets the callback that is invoked when the connector segment thumb settings are changed.
Declaration
public EventCallback<SegmentThumbSettings> ConnectorSegmentThumbChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<SegmentThumbSettings> | An Microsoft.AspNetCore.Components.EventCallback<> triggered when the ConnectorSegmentThumb value is modified. The default value is an empty event callback. |
Remarks
This callback is triggered when the ConnectorSegmentThumb property value is changed, either through data binding or programmatic updates.
Constraints
Gets or sets the constraints that enable or disable certain behaviors of the SfDiagramComponent.
Declaration
public DiagramConstraints Constraints { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramConstraints | A DiagramConstraints enumeration value that represents the behavioral constraints applied to the diagram. The default value is Default. |
Remarks
The constraints property allows you to control various aspects of diagram behavior such as selection, dragging, resizing, and interaction capabilities.
Multiple constraint values can be combined using bitwise operations to achieve the desired behavior combination.
Examples
The following example demonstrates how to set diagram constraints to allow only selection and prevent dragging:
<SfDiagramComponent @bind-Constraints="@diagramConstraints" />
@code
{
// Enable selection but disable dragging
DiagramConstraints diagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.Drag;
}ConstraintsChanged
Gets or sets the callback that is invoked when the DiagramConstraints value of the SfDiagramComponent changes.
Declaration
public EventCallback<DiagramConstraints> ConstraintsChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramConstraints> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the diagram constraints are modified. The default value is an empty event callback. |
Remarks
This callback allows parent components to be notified and respond when the diagram's constraint settings are updated at runtime.
ContextMenuSettings
Gets or sets the context menu settings for the SfDiagramComponent.
Declaration
public ContextMenuSettings ContextMenuSettings { get; set; }Property Value
| Type | Description |
|---|---|
| ContextMenuSettings | A ContextMenuSettings object that configures the context menu behavior and items. The default value is null. |
Remarks
The context menu settings control the appearance and behavior of the right-click context menu in the diagram. This includes menu items, visibility, custom menu options, and event handling for menu interactions.
When set to null, the diagram will use default context menu behavior. Configure this property to customize menu items, handle menu events, or disable the context menu entirely.
Examples
This example demonstrates how to configure custom context menu items with icons and event handling.
<SfDiagramComponent>
<ContextMenuSettings @bind-Show="@show" @bind-ShowCustomMenuOnly="@customMenuOnly" @bind-Items="@Items"
ContextMenuOpening="@BeforeOpen" ContextMenuItemClicked="@ItemClicked">
</ContextMenuSettings>
</SfDiagramComponent>
@code {
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
ContextMenuSettings ContextMenuSettings;
List<ContextMenuItem> Items;
bool customMenuOnly = false;
bool show = true;
protected override void OnInitialized()
{
Items = new List<ContextMenuItem>()
{
new ContextMenuItem()
{
Text = "Save As...",
Id = "save",
IconCss = "e-save",
},
new ContextMenuItem()
{
Text = "Group",
Id = "group",
IconCss = "e-group"
}
};
}
private void BeforeOpen(DiagramBeforeMenuOpenEventArgs args)
{
// Handle context menu opening logic
}
private void ItemClicked(DiagramMenuEventArgs args)
{
// Handle menu item click events
}
}Created
Gets or sets the event callback that occurs when the SfDiagramComponent is rendered and ready for interaction.
Declaration
public EventCallback<object> Created { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<System.Object> | An Microsoft.AspNetCore.Components.EventCallback<> of type System.Object that handles the created event. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the diagram component is fully rendered and initialized.
Examples
The following example demonstrates how to use the Created event to select a specific node after the diagram is rendered.
<SfDiagramComponent @ref="@Diagram" Width="100%" Height="700px" Nodes="nodes" Created="OnCreated">
</SfDiagramComponent>
@code
{
SfDiagramComponent Diagram;
private void OnCreated(object args)
{
// Select the third node after diagram is created
Diagram.Select(new ObservableCollection<IDiagramObject>() { Diagram.Nodes[2] });
}
}DataLoaded
Gets or sets the event callback that occurs when the SfDiagramComponent layout is rendered completely.
Declaration
public EventCallback<object> DataLoaded { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<System.Object> | An Microsoft.AspNetCore.Components.EventCallback<> of type System.Object that is invoked after the diagram layout rendering is completed. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the diagram layout rendering is completed.
Examples
The following example demonstrates how to handle the DataLoaded event:
<SfDiagramComponent DataLoaded="@DataLoaded"></SfDiagramComponent>
@code
{
private void DataLoaded(object args)
{
}
}DataSourceSettings
Gets or sets the data source configuration for binding external data to the SfDiagramComponent.
Declaration
public DataSourceSettings DataSourceSettings { get; set; }Property Value
| Type | Description |
|---|---|
| DataSourceSettings | A DataSourceSettings object that configures the data binding properties for the diagram. The default value is null. |
Remarks
The DataSourceSettings enables automatic generation of diagram nodes and connectors from data sources. This is particularly useful for creating automatic layouts.
When configured, the diagram will automatically create nodes based on the data source items and establish parent-child relationships using the specified ID and ParentID properties.
Examples
The following example demonstrates how to bind a data source to create an organizational chart:
<SfDiagramComponent>
<DataSourceSettings ID="Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>
<Layout Type="LayoutType.OrganizationalChart"></Layout>
</SfDiagramComponent>
@code
{
public class OrgChartDataModel
{
public string Id { get; set; }
public string Team { get; set; }
public string Role { get; set; }
}
public object DataSource = new List<object>()
{
new OrgChartDataModel() { Id= "1", Role= "General Manager" },
};
}DiagramTemplates
Gets or sets the template collection for customizing the visual representation of diagram elements in the SfDiagramComponent.
Declaration
public DiagramTemplates DiagramTemplates { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramTemplates | A DiagramTemplates object containing template definitions for various diagram elements. The default value is null. |
Remarks
The DiagramTemplates property allows you to define custom templates for nodes and other diagram elements, enabling rich customization of their visual appearance and behavior.
Examples
The following example demonstrates how to define a custom node template with a button element:
<SfDiagramComponent>
<DiagramTemplates>
<NodeTemplate>
@{
var id = (context as Node).ID;
<div style="height: 100%; width: 100%; background:green">
<input type="button" value="Button1" @onclick="@OnClick" />
</div>
}
</NodeTemplate>
</DiagramTemplates>
</SfDiagramComponent>DragDrop
Gets or sets the event callback that is triggered when a symbol is dragged and dropped from the symbol palette to the drawing area.
Declaration
public EventCallback<DropEventArgs> DragDrop { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DropEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles drag and drop operations. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a symbol is dropped onto the diagram.
Examples
The following example demonstrates how to handle the drag and drop event to access the dropped node information:
<SfDiagramComponent DragDrop="DragDrop"></SfDiagramComponent>
private void DragDrop(DropEventArgs args)
{
if (args.Element is Node)
{
string id = (args.Element as NodeBase).ID;
}
}Dragging
Occurs when an element is being dragged over another diagram element in the SfDiagramComponent.
Declaration
public EventCallback<DraggingEventArgs> Dragging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DraggingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked during drag operations. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever an element is dragged over another diagram element.
DragLeave
Occurs when a symbol is dragged outside of the SfDiagramComponent.
Declaration
public EventCallback<DragLeaveEventArgs> DragLeave { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DragLeaveEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when a drag operation leaves the diagram boundaries. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a symbol is dragged outside the diagram boundaries.
DragStart
Gets or sets the event callback that occurs when a symbol is dragged into the SfDiagramComponent from the symbol palette.
Declaration
public EventCallback<DragStartEventArgs> DragStart { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DragStartEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles the drag start operation. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a symbol drag operation begins from the symbol palette.
DrawingObject
Gets or sets the object to be drawn using a drawing tool in the SfDiagramComponent.
Declaration
public IDiagramObject DrawingObject { get; set; }Property Value
| Type | Description |
|---|---|
| IDiagramObject | An IDiagramObject that represents the template object for drawing operations. The default value is null. |
Remarks
Defines the template object used when creating new diagram elements with drawing tools. This can be a Node or Connector.
Used with tools like ContinuousDraw or DrawOnce to add repeated instances of the same object type.
Examples
The following example demonstrates how to set a drawing object for continuous node drawing:
<SfDiagramComponent Height="600px" InteractionController="Tools" @bind-DrawingObject="@DrawingObject" Nodes="@nodes" />
@code
{
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramInteractions Tools = DiagramInteractions.ContinuousDraw;
IDiagramObject DrawingObject { get; set; }
protected override void OnInitialized()
{
Node node = new Node()
{
ID = "node1",
Height = 100,
Width = 100,
OffsetX = 100,
OffsetY = 100,
};
DrawingObject = node;
}
}DrawingObjectChanged
Gets or sets the callback to trigger when the drawing object changes in the SfDiagramComponent.
Declaration
public EventCallback<IDiagramObject> DrawingObjectChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<IDiagramObject> | An Microsoft.AspNetCore.Components.EventCallback<> of type IDiagramObject that is invoked when the drawing object is modified. The default value is an empty event callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the drawing object is changed.
EnableChunkMessages
Gets or sets a value indicating whether to enable support for chunk messages in the SfDiagramComponent.
Declaration
public bool EnableChunkMessages { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean | A System.Boolean indicating whether chunk message support is enabled. The default value is false. |
Remarks
Chunk messages allow measurement of path, image, text and SVG data without increasing the maximum message size of a single incoming hub message (MaximumReceiveMessageSize 32KB).
When EnableChunkMessages is true, data is sent in smaller chunks to improve performance and prevent message size issues.
Examples
The following example demonstrates how to enable chunk message support in the diagram component.
<SfDiagramComponent Height="900px" Width="1200px" EnableChunkMessages="true">
</SfDiagramComponent>EnableConnectorSplitting
Gets or sets a value indicating whether to enable automatic splitting of connectors when dropping a new node onto an existing connector in the SfDiagramComponent.
Declaration
public bool EnableConnectorSplitting { get; set; }Property Value
| Type | Description |
|---|---|
| System.Boolean | A System.Boolean indicating whether automatic connector splitting is enabled. The default value is false. |
Remarks
When set to true, the connector is automatically split between two nodes upon dropping a new node onto an existing connector, creating a connection between the new node and existing nodes.
Examples
The following example demonstrates how to enable automatic connector splitting in the diagram component.
<SfDiagramComponent EnableConnectorSplitting="true" />FixedUserHandleClick
Gets or sets the event callback that is triggered when a Fixed User Handle item is clicked in the SfDiagramComponent.
Declaration
public EventCallback<FixedUserHandleClickEventArgs> FixedUserHandleClick { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<FixedUserHandleClickEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles fixed user handle click events. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a fixed user handle is clicked in the diagram.
Examples
The following example demonstrates how to handle the fixed user handle click event:
<SfDiagramComponent Width="1000px" Height="1000px" FixedUserHandleClick="@OnFixedUserHandleClick"></SfDiagramComponent>
private void OnFixedUserHandleClick(FixedUserHandleClickEventArgs args)
{
if (args.Handle != null)
{
// Handle the fixed user handle click logic here
}
}GetCustomCursor
Gets or sets a callback function that allows users to create custom cursors for the SfDiagramComponent.
Declaration
public Func<DiagramElementAction, bool, string, string> GetCustomCursor { get; set; }Property Value
| Type | Description |
|---|---|
| System.Func<DiagramElementAction, System.Boolean, System.String, System.String> | A System.Func<, , , > that takes DiagramElementAction, System.Boolean, and System.String parameters and returns a System.String representing the custom cursor. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required to determine the appropriate cursor based on the current diagram interaction context.
Examples
This example demonstrates how to implement a custom cursor function for different diagram interactions.
<SfDiagramComponent @bind-Nodes="Nodes" GetCustomCursor="@cursor"></SfDiagramComponent>
@code
{
public string cursor(DiagramElementAction action, bool active, string handle)
{
// Custom cursor logic based on action type
}
}GetCustomTool
Gets or sets a callback function that allows users to customize the interaction tool used in the SfDiagramComponent.
Declaration
public Func<DiagramElementAction, string, InteractionControllerBase> GetCustomTool { get; set; }Property Value
| Type | Description |
|---|---|
| System.Func<DiagramElementAction, System.String, InteractionControllerBase> | A System.Func<, , > that takes a DiagramElementAction and System.String as parameters and returns an InteractionControllerBase. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required to provide custom interaction tools based on the diagram element action and element ID.
Examples
The following example demonstrates how to implement a custom tool provider:
<SfDiagramComponent @bind-Nodes="Nodes" GetCustomTool="@GetCustomTool"></SfDiagramComponent>
@code
{
public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id)
{
// Custom tool logic implementation
}
}Height
Gets or sets the height of the SfDiagramComponent.
Declaration
public string Height { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A System.String representing the height dimension of the diagram component. The default value is |
Remarks
The height property determines the vertical space occupied by the diagram component within its container.
Changes to this property will trigger a re-render of the diagram to accommodate the new dimensions.
Examples
Setting diagram height using different units:
<SfDiagramComponent Height="900px">
</SfDiagramComponent>HeightChanged
Gets or sets the callback that is invoked when the height of the SfDiagramComponent changes.
Declaration
public EventCallback<string> HeightChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<System.String> | An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the height value changes. The default value is an empty event callback. |
Remarks
Use this callback to respond to dynamic height changes, implement responsive layout behavior, or maintain two-way binding with a parent component's height value.
Examples
The following example demonstrates how to handle the height change event:
<SfDiagramComponent Height="600px" HeightChanged="@OnHeightChanged" />
@code {
private void OnHeightChanged(string newHeight)
{
Console.WriteLine($"Diagram height changed to: {newHeight}");
// Additional logic to respond to height change
}
}HistoryChanged
Gets or sets the event callback that occurs when a change is reverted or restored through undo/redo operations in the SfDiagramComponent.
Declaration
public EventCallback<HistoryChangedEventArgs> HistoryChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<HistoryChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when history changes occur. The default value is an unassigned callback. |
Remarks
This callback is used to execute custom logic whenever the diagram history is modified.
HistoryManager
Gets or sets the history manager for the SfDiagramComponent that handles undo and redo operations.
Declaration
public DiagramHistoryManager HistoryManager { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramHistoryManager | A DiagramHistoryManager that manages the history of changes made to the diagram. The default value is a new instance of DiagramHistoryManager. |
Remarks
The history manager tracks all changes made to the diagram and provides functionality to undo and redo operations.
It maintains a stack of history entries that can be navigated through programmatically or via user interactions.
Examples
The following example demonstrates how to configure a custom redo operation for the history manager:
<SfDiagramComponent Width="800px" Height="800px">
<DiagramHistoryManager Redo="onCustomRedo"></DiagramHistoryManager>
</SfDiagramComponent>
@code
{
private void onCustomRedo(HistoryEntryBase entry)
{
Node current = entry.UndoObject.Clone() as Node;
(entry.UndoObject as Node).AdditionalInfo[(entry.UndoObject as Node).ID] = "Description";
entry.RedoObject = current;
}
}ID
Gets or sets the unique identifier of the SfDiagramComponent.
Declaration
public string ID { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A System.String representing the unique identifier for the diagram component. The default value is a randomly generated string. |
Remarks
The ID property serves as a unique identifier for the diagram component instance, enabling programmatic access and reference to the specific diagram.
This identifier is automatically generated if not explicitly provided.
Examples
The following example demonstrates how to set a custom ID for the diagram component.
<SfDiagramComponent Height="900px" Width="1200px" ID="myCustomDiagram">
</SfDiagramComponent>InteractionController
Gets or sets the precedence of the interactive tools in the SfDiagramComponent.
Declaration
public DiagramInteractions InteractionController { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramInteractions | A DiagramInteractions enumeration value that represents the precedence of interactive tools. The default value is Default. |
Remarks
The interaction controller affects how users can select, move, resize, and manipulate diagram elements. Different interaction modes provide varying levels of functionality and user control.
Examples
The following example demonstrates how to set the interaction controller to enable single selection mode.
<SfDiagramComponent Height="900px" Width="1200px" InteractionController="DiagramInteractions.SingleSelect">
</SfDiagramComponent>
@code {
private DiagramInteractions currentInteraction = DiagramInteractions.MultipleSelect;
}InteractionControllerChanged
Gets or sets the callback that is invoked when the interaction tool of the SfDiagramComponent changes.
Declaration
public EventCallback<DiagramInteractions> InteractionControllerChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramInteractions> | An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the current interaction tool is modified. The default value is an empty event callback. |
Remarks
Use this callback to respond when users switch between interaction modes such as selection, drawing, or editing.
KeyDown
Gets or sets the event callback that is triggered when a user presses a key.
Declaration
public EventCallback<KeyEventArgs> KeyDown { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles key press operations. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a key is pressed while the diagram has focus.
Examples
<SfDiagramComponent Width = "1000px" Height="1000px" KeyDown="@OnKeyDown"></SfDiagramComponent>
@code
{
private void OnKeyDown(KeyEventArgs args)
{
}
}KeyUp
Gets or sets the event callback that is triggered when a user releases a key.
Declaration
public EventCallback<KeyEventArgs> KeyUp { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles key release operations. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a key is released while the SfDiagramComponent has focus.
Examples
This example demonstrates how to handle the KeyUp event in a diagram component.
<SfDiagramComponent Width = "1000px" Height="1000px" KeyUp="@OnKeyUp"></SfDiagramComponent>
@code
{
private void OnKeyUp(KeyEventArgs args)
{
}
}Layout
Gets or sets the layout configuration used to auto-arrange nodes in the SfDiagramComponent.
Declaration
public Layout Layout { get; set; }Property Value
| Type | Description |
|---|---|
| Layout | A Layout object that defines the arrangement pattern for node elements in the diagram. The default value is null. |
Remarks
The Layout property enables automatic arrangement of nodes based on the selected layout type.
It calculates positions, spacing, and relationships using the configured data source.
Examples
The following example demonstrates how to configure an organizational chart layout with a data source:
<SfDiagramComponent Height="600px">
<DataSourceSettings ID="Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>
<Layout Type="LayoutType.OrganizationalChart"></Layout>
</SfDiagramComponent>LineRoutingSettings
Gets or sets the line routing settings for customizing the routing type and distance for connectors in the SfDiagramComponent.
Declaration
public LineRoutingSettings LineRoutingSettings { get; set; }Property Value
| Type | Description |
|---|---|
| LineRoutingSettings | A LineRoutingSettings object that represents the configuration for automatic connector routing behavior. The default value is null. |
Remarks
Line routing settings enable automatic pathfinding for connectors to avoid overlapping with nodes and other diagram elements.
The routing algorithm calculates optimal paths based on the specified RoutingType and maintains the configured ObstaclePadding distance from obstacles.
Examples
The following example demonstrates how to configure line routing settings with advanced routing type and custom obstacle padding:
<SfDiagramComponent>
<LineRoutingSettings RoutingType="RoutingTypes.Advanced" ObstaclePadding="12">
</LineRoutingSettings>
</SfDiagramComponent>Model
Gets or sets the diagram model used to generate and render the diagram.
Declaration
public DiagramModel Model { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramModel | A DiagramModel instance that defines the structure and content of the diagram. Currently supports UmlSequenceDiagramModel for UML sequence diagram generation. The default value is null. |
Remarks
Currently, only UML sequence diagram generation is supported using this model.
Examples
<SfDiagramComponent Height="600px" Model="@umlModel">
</SfDiagramComponent>
@code
{
DiagramModel umlModel;
protected override void OnInitialized()
{
umlModel = new UmlSequenceDiagramModel()
{
Participants = new List<UmlSequenceParticipant>()
{
new UmlSequenceParticipant()
{
ID = "User",
Content= "User",
ShowDestructionMarker= true,
IsActor= true,
ActivationBoxes= new List<UmlSequenceActivationBox>()
{
new UmlSequenceActivationBox() { ID = "act1", StartMessageID= "MSG1", EndMessageID= "MSG3" }
}
},
new UmlSequenceParticipant()
{
ID = "Server",
Content= "Server",
ShowDestructionMarker= true,
IsActor= false,
ActivationBoxes= new List<UmlSequenceActivationBox>()
{
new UmlSequenceActivationBox() { ID = "act2", StartMessageID= "MSG1", EndMessageID= "MSG3" }
}
}
},
Messages = new List<UmlSequenceMessage>()
{
new UmlSequenceMessage()
{
ID = "MSG1",
Content = "User sends request",
FromParticipantID = "User",
ToParticipantID = "Server"
},
new UmlSequenceMessage()
{
ID = "MSG2",
Content = "Processing",
FromParticipantID = "Server",
ToParticipantID = "Server"
},
new UmlSequenceMessage()
{
ID = "MSG3",
Content = "Server sends response",
FromParticipantID = "Server",
ToParticipantID = "User"
}
},
Fragments = new List<UmlSequenceFragment>()
{
new UmlSequenceFragment()
{
ID = "frag1",
Type = UmlSequenceFragmentType.Optional,
Conditions = new List<UmlSequenceFragmentCondition>()
{
new UmlSequenceFragmentCondition()
{
Content = "Interactions",
MessageIds = new List<string>(){"MSG1", "MSG2", "MSG3"}
}
}
}
}
};
}
}ModelChanged
Specifies the callback that is triggered when the DiagramModel changes.
Declaration
public EventCallback<DiagramModel> ModelChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramModel> | An Microsoft.AspNetCore.Components.EventCallback<> function that handles changes to the diagram model. |
Remarks
This callback should be assigned a method that handles the logic required whenever the diagram model is modified.
MouseEnter
Gets or sets the callback that occurs when the mouse pointer enters a node, connector, or diagram element in the SfDiagramComponent.
Declaration
public EventCallback<DiagramElementMouseEventArgs> MouseEnter { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles mouse enter interactions on diagram elements. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the mouse enters a diagram element.
Examples
The following example demonstrates how to assign and handle the mouse enter callback:
<SfDiagramComponent Width="1000px" Height="1000px" MouseEnter="OnMouseEnter"></SfDiagramComponent>
@code
{
private void OnMouseEnter(DiagramElementMouseEventArgs args)
{
if (args?.ActualObject != null)
{
Console.WriteLine("Mouse Entered");
}
}
}MouseHover
Gets or sets the callback that occurs when the mouse pointer rests on a node, connector, or diagram element in the SfDiagramComponent.
Declaration
public EventCallback<DiagramElementMouseEventArgs> MouseHover { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles mouse hover interactions on diagram elements. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the mouse pointer hovers over diagram elements.
Examples
The following example demonstrates how to assign and handle the mouse hover callback:
<SfDiagramComponent Width="1000px" Height="1000px" MouseHover="@MouseHover"></SfDiagramComponent>
@code
{
private void MouseHover(DiagramElementMouseEventArgs args)
{
if ((args != null) && (args.ActualObject != null))
{
Console.WriteLine("MouseHover");
}
}
}MouseLeave
Gets or sets the callback that is invoked when the mouse pointer leaves a node or connector in the SfDiagramComponent.
Declaration
public EventCallback<DiagramElementMouseEventArgs> MouseLeave { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles mouse leave events. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required when the mouse pointer exits diagram elements such as nodes or connectors.
Examples
The following example demonstrates how to handle the MouseLeave event:
<SfDiagramComponent Width="1000px" Height="1000px" MouseLeave="@MouseLeave"></SfDiagramComponent>
@code
{
private void MouseLeave(DiagramElementMouseEventArgs args)
{
if ((args != null) && (args.ActualObject != null))
{
Console.WriteLine("MouseLeave");
}
}
}NodeCreating
Gets or sets the event callback that is invoked when a node is being created in the SfDiagramComponent.
Declaration
public EventCallback<IDiagramObject> NodeCreating { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<IDiagramObject> | An Microsoft.AspNetCore.Components.EventCallback<> that provides access to the node being created. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a node is being created in the diagram.
Examples
The following example demonstrates how to use the NodeCreating callback to set default properties for nodes.
<SfDiagramComponent NodeCreating="@NodeCreating"></SfDiagramComponent>
@code
{
private void NodeCreating(IDiagramObject obj)
{
}
}Nodes
Gets or sets a collection of node objects used to visualize geometrical information in the SfDiagramComponent.
Declaration
public DiagramObjectCollection<Node> Nodes { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramObjectCollection<Node> | A DiagramObjectCollection<T> of type Node containing the nodes that define the visual elements of the diagram. The default value is null. |
Remarks
Each Node defines geometry, position, size, and appearance. Updates to the collection automatically reflect in the diagram’s rendering and internal name table.
Each node must have a unique ID for proper identification and interaction within the diagram.
Examples
The following example demonstrates how to create and assign nodes to the diagram:
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node = new Node()
{
ID = "node1",
// Size of the node
Height = 100,
Width = 100,
// Position of the node
OffsetX = 100,
OffsetY = 100,
};
nodes.Add(node);
}
}NodesChanged
Gets or sets the callback to trigger when the SfDiagramComponent nodes collection changes.
Declaration
public EventCallback<DiagramObjectCollection<Node>> NodesChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Node>> | An Microsoft.AspNetCore.Components.EventCallback<> of DiagramObjectCollection<T> that is invoked when nodes are added, removed, or modified. The default value is an empty event callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the nodes collection is modified.
OnAutoScrollChange
Gets or sets the event callback that occurs when changes are detected to the scroll position, extent, or viewport size during auto scrolling operations in the SfDiagramComponent.
Declaration
public EventCallback<AutoScrollChangeEventArgs> OnAutoScrollChange { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<AutoScrollChangeEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles auto scroll change notifications. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever auto scrolling is performed on diagram elements.
Examples
The following example demonstrates how to handle the auto scroll change event and cancel the operation:
<SfDiagramComponent OnAutoScrollChange="@OnAutoScrollChange">
<ScrollSettings EnableAutoScroll="true"></ScrollSettings>
</SfDiagramComponent>
@code
{
private void OnAutoScrollChange(AutoScrollChangeEventArgs args)
{
args.Cancel = true;
}
}PageSettings
Gets or sets the page settings for customizing the appearance, width, and height of the SfDiagramComponent page.
Declaration
public PageSettings PageSettings { get; set; }Property Value
| Type | Description |
|---|---|
| PageSettings | A PageSettings object that represents the configuration for the diagram page dimensions and appearance. The default value is null. |
Remarks
Controls the diagram layer boundaries, dimensions, and margins. When null, uses default settings with automatic sizing.
Examples
The following example demonstrates how to configure page settings with custom dimensions and margins:
<SfDiagramComponent @ref="diagram" Width="100%" Height="500px" Nodes="@nodes" Connectors="@connectors">
<PageSettings Width="800px" Height="600px">
<PageMargin Left="10" Right="10" Top="10" Bottom="10"></PageMargin>
</PageSettings>
</SfDiagramComponent>
@code {
PageSettings pageSettings = new PageSettings()
{
Width = 800,
Height = 600,
PageMargin = new PageMargin() { Left = 10, Right = 10, Top = 10, Bottom = 10 }
};
}PositionChanged
Gets or sets the callback that is invoked when a node's or connector's position is changed in the SfDiagramComponent.
Declaration
public EventCallback<PositionChangedEventArgs> PositionChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<PositionChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles position change events. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the diagram elements are repositioned.
Examples
The following example demonstrates how to handle the PositionChanged event:
<SfDiagramComponent PositionChanged="@OnPositionChanged"></SfDiagramComponent>
@code
{
private void OnPositionChanged(PositionChangedEventArgs args)
{
if (args.NewValue != null && args.OldValue != null && args.Element != null)
{
Console.WriteLine("Changed");
}
}
}PositionChanging
Gets or sets the callback that is invoked when elements are being dragged in the SfDiagramComponent.
Declaration
public EventCallback<PositionChangingEventArgs> PositionChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<PositionChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles position changing events during drag operations. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever diagram elements are being repositioned.
Examples
The following example demonstrates how to handle the PositionChanging event:
<SfDiagramComponent PositionChanging="@changed"></SfDiagramComponent>
@code
{
private void changed(PositionChangingEventArgs args)
{
if (args.NewValue != null && args.OldValue != null && args.Element != null)
{
Console.WriteLine("Changing");
}
}
}PropertyChanged
Gets or sets the event callback that occurs when a node or connector property changes in the SfDiagramComponent.
Declaration
public EventCallback<PropertyChangedEventArgs> PropertyChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<PropertyChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles property change notifications. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required when the associated property value changes.
RotationChanged
Gets or sets the event callback that occurs when diagram elements are rotated in the SfDiagramComponent.
Declaration
public EventCallback<RotationChangedEventArgs> RotationChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<RotationChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles the rotation changed event. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever diagram elements have completed their rotation operation.
Examples
<SfDiagramComponent RotationChanged="@RotationChanged"></SfDiagramComponent>
@code
{
private void RotationChanged(RotationChangedEventArgs args)
{
}
}RotationChanging
Gets or sets the event callback that occurs before diagram elements are rotated in the SfDiagramComponent.
Declaration
public EventCallback<RotationChangingEventArgs> RotationChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<RotationChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles the rotation changing event. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever diagram elements are about to be rotated.
Examples
<SfDiagramComponent RotationChanging="@RotationChanging"></SfDiagramComponent>
@code
{
private void RotationChanging(RotationChangingEventArgs args)
{
}
}RulerSettings
Gets or sets the settings for customizing the horizontal and vertical rulers in the SfDiagramComponent.
Declaration
public RulerSettings RulerSettings { get; set; }Property Value
| Type | Description |
|---|---|
| RulerSettings | A RulerSettings object that controls the visibility and appearance of horizontal and vertical rulers. The default value is null. |
Remarks
The ruler settings manage the visibility of horizontal and vertical rulers within the diagram and provide options to customize their appearance
Rulers help users align and position diagram elements with precision by providing visual measurement guides.
Examples
The following example demonstrates how to configure ruler settings with custom intervals for both horizontal and vertical rulers:
<SfDiagramComponent Height="600px">
<RulerSettings>
<HorizontalRuler Interval="6">
</HorizontalRuler>
<VerticalRuler Interval="7">
</VerticalRuler>
</RulerSettings>
</SfDiagramComponent>ScrollChanged
Gets or sets the callback that is invoked when the scrollbar is updated in the SfDiagramComponent.
Declaration
public EventCallback<ScrollChangedEventArgs> ScrollChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<ScrollChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles scroll change events. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the diagram's scroll position is changed.
Examples
The following example demonstrates how to handle the ScrollChanged event:
<SfDiagramComponent Width="1000px" Height="1000px" ScrollChanged="@ScrollChanged"></SfDiagramComponent>
@code
{
private void ScrollChanged(ScrollChangedEventArgs args)
{
}
}ScrollSettings
Gets or sets the scroll settings that define the current zoom value, zoom factor, scroll status, and viewport size of the SfDiagramComponent.
Declaration
public ScrollSettings ScrollSettings { get; set; }Property Value
| Type | Description |
|---|---|
| ScrollSettings | A ScrollSettings object that contains the zoom and scroll configuration for the diagram. The default value is null. |
Remarks
The ScrollSettings property controls the visual viewport and navigation behavior of the diagram, including horizontal and vertical scroll offsets.
When set to null, the diagram uses default scroll and zoom settings.
Examples
<SfDiagramComponent Width="1000px" Height="1000px">
<ScrollSettings VerticalOffset="900px" HorizontalOffset="800px" >
</ScrollSettings>
</SfDiagramComponent> SegmentCollectionChange
Gets or sets the event callback that is triggered when the connector's segment collection is updated in the SfDiagramComponent.
Declaration
public EventCallback<SegmentCollectionChangeEventArgs> SegmentCollectionChange { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<SegmentCollectionChangeEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles segment collection modification operations. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever the connector's segment collection is changed in the diagram.
Examples
This example demonstrates how to handle the SegmentCollectionChange event in a diagram component.
<SfDiagramComponent Width="1000px" Height="1000px" SegmentCollectionChange="@OnSegmentCollectionChange">
</SfDiagramComponent>
@code
{
private void OnSegmentCollectionChange(SegmentCollectionChangeEventArgs args)
{
}
}SelectionChanged
Gets or sets the event callback that occurs after the selection changes in the SfDiagramComponent.
Declaration
public EventCallback<SelectionChangedEventArgs> SelectionChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<SelectionChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles selection change notifications after they occur. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required when the selection has changed.
SelectionChanging
Gets or sets the event callback that occurs before the selection changes in the SfDiagramComponent.
Declaration
public EventCallback<SelectionChangingEventArgs> SelectionChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<SelectionChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles selection change notifications before they occur. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required when the selection is about to change.
SelectionSettings
Gets or sets the selection settings that define the collection of selected items and the size and position of the selector in the SfDiagramComponent.
Declaration
public DiagramSelectionSettings SelectionSettings { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramSelectionSettings | A DiagramSelectionSettings object that configures selection behavior and appearance. The default value is a new instance of DiagramSelectionSettings. |
Remarks
The SelectionSettings property manages how nodes, connectors, and other diagram elements are selected and visually represented within the component.
Examples
The following example demonstrates how to configure selection settings with custom dimensions:
<SfDiagramComponent @ref="diagram" SelectionSettings="@selectionSettings" Height="600px" />
@code {
DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings()
{
Width = 100,
Height = 150
};
}SelectionSettingsChanged
Gets or sets the callback that is invoked when the SelectionSettings property of the SfDiagramComponent is changed.
Declaration
public EventCallback<DiagramSelectionSettings> SelectionSettingsChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramSelectionSettings> | An Microsoft.AspNetCore.Components.EventCallback<> triggered when the selection settings are updated. The default value is an empty event callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the selection settings is modified.
SetNodeTemplate
Gets or sets a callback function that customizes the node template for the SfDiagramComponent.
Declaration
public Func<IDiagramObject, CommonElement> SetNodeTemplate { get; set; }Property Value
| Type | Description |
|---|---|
| System.Func<IDiagramObject, CommonElement> | A System.Func<, > that takes an IDiagramObject and returns a CommonElement for custom node rendering. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a custom node template needs to be created.
Examples
The following example demonstrates how to set a custom node template:
<SfDiagramComponent @bind-Nodes="Nodes" SetNodeTemplate="SetTemplate"></SfDiagramComponent>
@code
{
DiagramObjectCollection<Node> Nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
StackPanel stackPanel = SetTemplate(null) as StackPanel;
stackPanel.Orientation = Orientation.Horizontal;
basicElements.Add(stackPanel);
}
}SizeChanged
Gets or sets the event callback that occurs when a node has been resized in the SfDiagramComponent.
Declaration
public EventCallback<SizeChangedEventArgs> SizeChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<SizeChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles the size changed event. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a diagram element has completed its resize operation.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" SizeChanged="@SizeChanged" />
@code
{
// To define the node collection
DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
// A node is created and stored in the nodes collection.
Node node = new Node()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }
};
// Add a node
nodes.Add(node);
}
// Size change event for the diagram
public void SizeChanged(SizeChangedEventArgs args)
{
Console.WriteLine(args.NewValue.Nodes[0].ID);
}
}SizeChanging
Gets or sets the event callback that occurs when a node is being resized in the SfDiagramComponent.
Declaration
public EventCallback<SizeChangingEventArgs> SizeChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<SizeChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles the size changing event. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a diagram element is being resized.
Examples
<SfDiagramComponent Height="600px" Nodes="@nodes" SizeChanging="@OnSizeChange" />
@code
{
DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
// Position of the node
OffsetX = 250,
OffsetY = 250,
// Size of the node
Width = 100,
Height = 100,
};
nodes.Add(node);
}
// Size change event for the diagram
public void OnSizeChange(SizeChangingEventArgs args)
{
Console.WriteLine(args.NewValue.Nodes[0].ID);
}
}SnapSettings
Gets or sets the snap settings that define grid lines and specify how and when objects must be snapped in the SfDiagramComponent.
Declaration
public SnapSettings SnapSettings { get; set; }Property Value
| Type | Description |
|---|---|
| SnapSettings | A SnapSettings object that represents the grid lines and snapping behavior configuration for the diagram. The default value is null. |
Remarks
The snap settings control the visual grid display and automatic snapping behavior of diagram elements. When configured, objects will automatically align to grid intersections or specified angles during drag operations.
Use the Constraints property to control snapping behavior and grid line visibility. The SnapAngle property defines the angular increment for rotation snapping.
Examples
The following example demonstrates how to configure snap settings with visible grid lines and custom styling:
<SfDiagramComponent Height="500px">
<SnapSettings Constraints="SnapConstraints.ShowLines" SnapAngle="10">
<HorizontalGridLines LineColor="blue" LineDashArray="2,2">
</HorizontalGridLines>
<VerticalGridLines LineColor="blue" LineDashArray="2,2">
</VerticalGridLines>
</SnapSettings>
</SfDiagramComponent>SourcePointChanged
Gets or sets the event callback that is triggered when the source endpoint of a connector has been changed in the SfDiagramComponent.
Declaration
public EventCallback<EndPointChangedEventArgs> SourcePointChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles source point changed events. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a connector's source endpoint has been modified in the diagram.
Examples
The following example demonstrates how to handle the source point changed event:
<SfDiagramComponent Width="1000px" Height="1000px" SourcePointChanged="@OnSourcePointChanged"></SfDiagramComponent>
private void OnSourcePointChanged(EndPointChangedEventArgs args)
{
if (args.Connector != null)
{
Connector connector = args.Connector;
}
}SourcePointChanging
Gets or sets the event callback that is triggered when the source endpoint of a connector is being dragged or modified in the SfDiagramComponent.
Declaration
public EventCallback<EndPointChangingEventArgs> SourcePointChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles source point modification events. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a connector's source endpoint is being changed in the diagram.
Examples
The following example demonstrates how to handle the source point changing event:
<SfDiagramComponent Width="1000px" Height="1000px" SourcePointChanging="@OnSourcePointChanging"></SfDiagramComponent>
private void OnSourcePointChanging(EndPointChangingEventArgs args)
{
if (args.Connector != null)
{
Connector connector = args.Connector;
}
}Swimlanes
Gets or sets the collection of swimlanes in the SfDiagramComponent.
Declaration
public DiagramObjectCollection<Swimlane> Swimlanes { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramObjectCollection<Swimlane> | A DiagramObjectCollection<T> of Swimlane objects representing the swimlanes in the diagram. The default value is null. |
Remarks
Each Swimlane defines structural elements like headers, phases, and lanes for organizing related nodes and connectors.
Swimlanes support both horizontal and vertical orientations and can include multiple lanes and phases.
Examples
The following example demonstrates how to create and configure swimlanes with nodes:
<SfDiagramComponent Height="600px" Width="90%" Swimlanes="@SwimlaneCollections">
</SfDiagramComponent>
@code {
DiagramObjectCollection<Swimlane> SwimlaneCollections = new DiagramObjectCollection<Swimlane>();
protected override void OnInitialized()
{
Node node1 = new Node()
{
ID = "node1",
Height = 100,
Width = 100,
OffsetX = 100,
OffsetY = 100,
};
Node node2 = new Node()
{
ID = "node2",
Height = 100,
Width = 100,
OffsetX = 300,
OffsetY = 100,
};
SwimlaneCollections = new DiagramObjectCollection<Swimlane>()
{
new Swimlane()
{
ID = "swimlane1",
Orientation = Orientation.Horizontal,
Height = 200,
Width = 450,
Header = new SwimlaneHeader()
{
Annotation = new Annotation() { Content = "Header of swimlane" },
Height = 30
},
Phases = new DiagramObjectCollection<Phase>()
{
new Phase()
{
Header = new SwimlaneHeader()
{
Annotation = new Annotation() { Content = "Header of phase" }
},
Width = 450
}
},
Lanes = new DiagramObjectCollection<Lane>()
{
new Lane()
{
Header = new SwimlaneHeader()
{
Annotation = new Annotation() { Content = "Header of lane" }
},
Height = 100,
Children = new DiagramObjectCollection<Node>()
{
node1, node2
}
}
}
}
};
}
}SwimlanesChanged
Gets or sets the callback to trigger when the SfDiagramComponent swimlanes collection changes.
Declaration
public EventCallback<DiagramObjectCollection<Swimlane>> SwimlanesChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Swimlane>> | An Microsoft.AspNetCore.Components.EventCallback<> of DiagramObjectCollection<T> that is invoked when swimlanes are added, removed, or modified. The default value is an empty event callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever the swimlane collection is modified.
TargetPointChanged
Gets or sets the event callback that occurs when a connector's target point is changed in the SfDiagramComponent.
Declaration
public EventCallback<EndPointChangedEventArgs> TargetPointChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles target point change notifications. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever a connector's target point is modified.
Examples
The following example demonstrates how to handle target point changes in a diagram:
<SfDiagramComponent Width="1000px" Height="1000px" TargetPointChanged="@OnTargetPointChanged"></SfDiagramComponent>
private void OnTargetPointChanged(EndPointChangedEventArgs args)
{
if (args.Connector != null)
{
Connector connector = args.Connector;
}
}TargetPointChanging
Gets or sets the event callback that is triggered when the target endpoint of a connector is being changed in the SfDiagramComponent.
Declaration
public EventCallback<EndPointChangingEventArgs> TargetPointChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles target point changing events. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a connector's target endpoint is being modified in the diagram.
Examples
The following example demonstrates how to handle the target point changing event:
<SfDiagramComponent Width="1000px" Height="1000px" TargetPointChanging="@OnTargetPointChanging"></SfDiagramComponent>
private void OnTargetPointChanging(EndPointChangingEventArgs args)
{
if (args.Connector != null)
{
Connector connector = args.Connector;
}
}TextChanged
Gets or sets the callback that is invoked when a node's or connector's label text is modified in the SfDiagramComponent.
Declaration
public EventCallback<TextChangeEventArgs> TextChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<TextChangeEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles text change notifications. The default value is an empty callback. |
Remarks
This callback should be assigned a method that handles the logic required whenever text content of diagram elements is modified.
Examples
The following example demonstrates how to assign a text change handler:
<SfDiagramComponent TextChanged="@OnTextChanged"></SfDiagramComponent>
@code {
private void OnTextChanged(TextChangeEventArgs args)
{
// Handle text change logic
Console.WriteLine($"Text changed to: {args.NewText}");
// Additional processing can be performed here
}
}TextChanging
Gets or sets the event callback that is invoked when the node's or connector's label text is about to change in the SfDiagramComponent.
Declaration
public EventCallback<TextChangeEventArgs> TextChanging { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<TextChangeEventArgs> | An Microsoft.AspNetCore.Components.EventCallback<> that handles the text changing event. The default value is null. |
Remarks
This callback should be assigned a method that handles the logic required whenever a text change operation is about to occur on diagram elements.
Examples
The following example demonstrates how to assign and use the TextChanging property to validate text changes:
<SfDiagramComponent TextChanging="@OnLabelTextChanging"></SfDiagramComponent>
private void OnLabelTextChanging(TextChangeEventArgs args)
{
// Cancel if text exceeds maximum length
if (args.NewValue?.Length > 50)
{
args.Cancel = true;
}
}Tooltip
Gets or sets the tooltip that should be shown when the mouse hovers over nodes or connectors in the SfDiagramComponent.
Declaration
public DiagramTooltip Tooltip { get; set; }Property Value
| Type | Description |
|---|---|
| DiagramTooltip | A Syncfusion.Blazor.Diagram.SfDiagramComponent.DiagramTooltip representing the tooltip configuration for the diagram. The default value is null. |
Remarks
The diagram tooltip is displayed when nodes and connectors have their constraint values set to "InheritTooltip".
Individual nodes and connectors can override this diagram-level tooltip by setting their own Syncfusion.Blazor.Diagram.SfDiagramComponent.DiagramTooltip properties.
The tooltip appears on mouse hover and provides contextual information about diagram elements.
Examples
The following example demonstrates how to configure a diagram-level tooltip and node-specific tooltips.
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" Tooltip="@tooltip" @bind-Nodes="@nodes">
</SfDiagramComponent>
@code {
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
DiagramTooltip tooltip = new DiagramTooltip() { Content = "Diagram Tooltip" };
protected override void OnInitialized()
{
Node node1 = new Node()
{
ID = "node1",
OffsetX = 100,
OffsetY = 100,
Tooltip = new DiagramTooltip() { Content = "Node1 Tooltip" }
};
nodes.Add(node1);
}
}Width
Gets or sets the width of the SfDiagramComponent.
Declaration
public string Width { get; set; }Property Value
| Type | Description |
|---|---|
| System.String | A System.String representing the width dimension of the diagram component.
The default value is |
Remarks
The width property determines the horizontal space occupied by the diagram component within its container.
Changes to this property will trigger a re-render of the diagram to accommodate the new dimensions.
Examples
<SfDiagramComponent Width="900px" Connectors="@connectors">
</SfDiagramComponent>WidthChanged
Gets or sets the callback that is invoked when the width of the SfDiagramComponent changes.
Declaration
public EventCallback<string> WidthChanged { get; set; }Property Value
| Type | Description |
|---|---|
| Microsoft.AspNetCore.Components.EventCallback<System.String> | An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the width value changes. The default value is an empty event callback. |
Remarks
Use this callback to respond to dynamic width changes, implement responsive layout behavior, or maintain two-way binding with a parent component's width value.
Examples
The following example demonstrates how to handle the width change event:
<SfDiagramComponent Width="800px" WidthChanged="@OnWidthChanged" />
@code {
private void OnWidthChanged(string newWidth)
{
Console.WriteLine($"Diagram width changed to: {newWidth}");
// Additional logic to respond to width change
}
}Methods
AddChildAsync(NodeGroup, NodeBase)
Adds a child node or connector to the specified NodeGroup in the SfDiagramComponent.
Declaration
public Task AddChildAsync(NodeGroup group, NodeBase child)Parameters
| Type | Name | Description |
|---|---|---|
| NodeGroup | group | A NodeGroup instance representing the target group node to which the child will be added. Must not be null. |
| NodeBase | child | A NodeBase instance representing the node or connector to be added as a child to the group. Must not be null. |
Returns
| Type |
|---|
| System.Threading.Tasks.Task |
Examples
Adding a node to an existing group:
NodeGroup parentGroup = new NodeGroup();
Node childNode = new Node() { ID = "child1", Width = 100, Height = 100 };
// Add the child node to the group
await diagram.AddChildAsync(parentGroup, childNode);AddDiagramElementsAsync(DiagramObjectCollection<NodeBase>)
Asynchronously adds a collection of diagram elements (nodes, connectors, and groups) to the SfDiagramComponent.
Declaration
public Task AddDiagramElementsAsync(DiagramObjectCollection<NodeBase> items)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramObjectCollection<NodeBase> | items | A DiagramObjectCollection<T> containing the nodes, connectors, and groups to be added to the diagram. If null, no operation is performed. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation of adding the diagram elements. |
Remarks
Use this method to programmatically add multiple nodes, connectors, or groups to the diagram. It efficiently processes the input collection and updates the diagram accordingly.
Examples
The following example demonstrates how to add multiple diagram elements to a diagram:
SfDiagramComponent diagram = new SfDiagramComponent();
DiagramObjectCollection elements = new DiagramObjectCollection<NodeBase>();
elements.Add(new Node { Id = "node1", OffsetX = 100, OffsetY = 100 });
elements.Add(new Node { Id = "node2", OffsetX = 200, OffsetY = 200 });
elements.Add(new Connector { Id = "connector1", SourceID = "node1", TargetID = "node2" });
await diagram.AddDiagramElementsAsync(elements);AddHistoryEntry(HistoryEntryBase)
Adds the specified history entry to the SfDiagramComponent undo/redo tracking system.
Declaration
public void AddHistoryEntry(HistoryEntryBase entry)Parameters
| Type | Name | Description |
|---|---|---|
| HistoryEntryBase | entry | A HistoryEntryBase object that contains information about a change made to the diagram |
BeginUpdate()
Locks the diagram and suspends visual updates until EndUpdateAsync() is called.
Declaration
public void BeginUpdate()Remarks
Use this method to batch multiple diagram changes and apply them together for better performance. While locked, the diagram does not re-render or trigger layout updates until EndUpdateAsync() is invoked.
BringForward()
Visually moves the selected nodes, connectors, and groups forward in the z-order by one level over the nearest overlapping diagram elements in the SfDiagramComponent.
Declaration
public void BringForward()Remarks
The selected elements will appear above the immediately overlapping elements but below any elements that were already at higher z-order levels.
Examples
The following example demonstrates how to select a node and bring it forward in the z-order:
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100};
nodes.Add(node1);
Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 };
nodes.Add(node2);
Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 };
nodes.Add(node3);
}
private void BringForward()
{
diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[0] });
diagram.BringForward();
}
}BringIntoCenter(DiagramRect)
Brings the specified bounds into the center of the viewport of the SfDiagramComponent.
Declaration
public void BringIntoCenter(DiagramRect bound)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramRect | bound | A DiagramRect representing the rectangular bounds that should be centered in the viewport. The bounds define the area to be brought into the center view. |
Remarks
This method adjusts the diagram's viewport to center the specified rectangular area, making it fully visible and positioned at the center of the current view.
Examples
Brings the specified bounds into the center of the view port of the diagram
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"><PageSettings @bind-Orientation="@pageOrientation"
@bind-MultiplePage="@IsMultiplePage"></PageSettings>
</SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes;
DiagramObjectCollection<Connector> connectors;
Create a node with out of the view port to check bring into view and bring center functionalities
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>(){
new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, Annotations =
new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Node1" } } },
};
}
Brings the specified bounds into the center of the view port of the diagram
private void BringIntoCenter()
{
DiagramRect bound = new DiagramRect(950,800,500,500);
diagram.BringIntoCenter(bound);
}
}BringIntoView(DiagramRect)
Brings the specified bounds into the viewport of the SfDiagramComponent.
Declaration
public void BringIntoView(DiagramRect bounds)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramRect | bounds | A DiagramRect representing the rectangular bounds that should be brought into the viewport. The bounds define the area that needs to be visible within the diagram's current view. |
Remarks
This method adjusts the diagram's viewport to ensure the specified rectangular area is visible.
Examples
Brings the specified bounds into the view port of the diagram
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"><PageSettings
@bind-Orientation="@pageOrientation" @bind-MultiplePage="@IsMultiplePage"></PageSettings>
</SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes;
DiagramObjectCollection<Connector> connectors;
Create a node with out of the view port to check bring into view and bring center functionalities
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>(){
new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, Annotations =
new DiagramObjectCollection<ShapeAnnotation>() { new ShapeAnnotation() { Content = "Node1" } } },
};
}
Brings the specified bounds into the view port of the diagram
private void BringIntoView()
{
DiagramRect bounds = new DiagramRect(950,800,500,500);
diagram.BringIntoView(bounds);
}
}BringToFront()
Visually brings the selected Node, Connector, and group elements to the front over all other overlapped diagram objects in the SfDiagramComponent.
Declaration
public void BringToFront()Remarks
This method changes the z-order of the currently selected diagram objects, making them appear on top of any overlapping elements.
Examples
This example demonstrates how to bring a selected node to the front of other overlapping nodes.
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100};
nodes.Add(node1);
Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 };
nodes.Add(node2);
Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 };
nodes.Add(node3);
}
private void BringToFront()
{
diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[0] });
diagram.BringToFront();
}
}BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
Clear()
Clears all diagram elements including nodes, connectors, swimlanes, phases, and lanes from the SfDiagramComponent.
Declaration
public void Clear()Remarks
After calling this method, the diagram will be in a clean state with no elements, and any references to previously existing elements will become invalid.
ClearHistory()
Clears the entire undo/redo history of the SfDiagramComponent.
Declaration
public void ClearHistory()Remarks
This method removes all stored history entries from the diagram's undo/redo stack. Use this method when you want to reset the history state.
Examples
The following example demonstrates how to clear the diagram history:
// Perform some operations
diagram.Add(node);
diagram.Delete(connector);
// Clear all history - previous operations cannot be undone
diagram.ClearHistory();ClearSelection()
Clears all selected nodes and connectors in the SfDiagramComponent.
Declaration
public void ClearSelection()Remarks
This method removes the selection state from all currently selected diagram elements, including nodes and connectors.
Examples
The following example demonstrates how to clear all selections in a diagram:
// Clear all selected items in the diagram
diagramComponent.ClearSelection();Clone()
Creates a shallow copy of the current SfDiagramComponent instance.
Declaration
public virtual object Clone()Returns
| Type | Description |
|---|---|
| System.Object | An System.Object representing a shallow copy of the current diagram instance. The returned object contains the same property values as the original but is a separate instance. |
Examples
The following example demonstrates how to clone a diagram component:
// Create and configure a diagram
SfDiagramComponent originalDiagram = new SfDiagramComponent();
originalDiagram.Width = "100%";
originalDiagram.Height = "600px";
// Clone the diagram
SfDiagramComponent clonedDiagram = (SfDiagramComponent)originalDiagram.Clone();Copy()
Copies the currently selected nodes and connectors from the SfDiagramComponent to the clipboard.
Declaration
public void Copy()Remarks
This method copies all currently selected diagram elements (nodes and connectors) to the system clipboard, making them available for paste operations.
Examples
The following example demonstrates how to copy selected diagram elements to the clipboard.
<SfDiagramComponent @ref="diagram"></SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
private void copy()
{
diagram.Copy();
}
}Cut()
Removes the currently selected nodes and connectors from the SfDiagramComponent and moves them to the clipboard.
Declaration
public void Cut()Remarks
This method performs a cut operation on all currently selected diagram elements (nodes and connectors), removing them from the diagram and placing them in the system clipboard for subsequent paste operations.
The operation only affects elements that are currently selected in the diagram. If no elements are selected, the clipboard operation will not perform any action.
Examples
The following example demonstrates how to cut selected elements from a diagram:
<SfDiagramComponent @ref="diagram"></SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
private void CutSelectedElements()
{
diagram.Cut();
}
}Delete(DiagramObjectCollection<NodeBase>)
Deletes the specified diagram elements from the SfDiagramComponent.
Declaration
public void Delete(DiagramObjectCollection<NodeBase> DiagramElements = null)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramObjectCollection<NodeBase> | DiagramElements | A DiagramObjectCollection<T> containing the diagram elements (nodes, connectors, and groups) to be deleted. |
Remarks
When this method is called without any parameter or with a null parameter, the currently selected diagram elements are deleted.
Examples
The following example demonstrates how to delete specific diagram elements programmatically.
<SfDiagramComponent @ref="@Diagram" Width="1200px" Height="600px" Nodes="@nodes" Connectors="@connectors">
</SfDiagramComponent>
@code
{
private void Delete()
{
var diagramElements = new DiagramObjectCollection<NodeBase>();
diagramElements.Add(Diagram.Nodes[0]);
diagramElements.Add(Diagram.Connectors[0]);
Diagram.Delete(diagramElements);
}
}DeleteDataAsync(String, Object, String, Query)
Deletes data from the data source asynchronously based on the specified key field and value. This operation modifies the data set by removing the identified records.
Declaration
public Task DeleteDataAsync(string keyField, object value, string tableName = null, Query query = null)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | keyField | The key field to identify the data to delete. |
| System.Object | value | The value of the key field to identify the data to delete. |
| System.String | tableName | The name of the table from which the data will be deleted. Optional. |
| Query | query | The query which can be executed against data source. Optional. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
Examples
<button class="btn btn-primary" @onclick="Delete">Delete</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
<DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
<SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</DataSourceSettings>
<Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{
SfDiagramComponent diagram;
public async void Delete()
{
await diagram.DeleteDataAsync("EmployeeID", 6);
}
} DoLayoutAsync()
Asynchronously refreshes the layout of the SfDiagramComponent at runtime.
Declaration
public Task DoLayoutAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation of refreshing the diagram layout. |
Remarks
This method recalculates and applies the current layout algorithm to all diagram elements, updating their positions and arrangements based on the configured layout settings.
Examples
The following example demonstrates how to refresh the diagram layout:
SfDiagramComponent diagram = new SfDiagramComponent();
// Add nodes and connectors to the diagram
// Configure layout settings
await diagram.DoLayoutAsync();Drag(IDiagramObject, Double, Double)
Drags the specified IDiagramObject by moving it horizontally and vertically by the given pixel distances within the SfDiagramComponent.
Declaration
public void Drag(IDiagramObject obj, double tx, double ty)Parameters
| Type | Name | Description |
|---|---|---|
| IDiagramObject | obj | An IDiagramObject representing the node or connector to be dragged. Cannot be null. |
| System.Double | tx | A System.Double value specifying the horizontal distance in pixels by which the object should be moved. Positive values move the object to the right, negative values move it to the left. |
| System.Double | ty | A System.Double value specifying the vertical distance in pixels by which the object should be moved. Positive values move the object downward, negative values move it upward. |
Remarks
The method handles BPMN annotations, containers, swimlanes, and selection groups, automatically updating the diagram page.
Examples
Dragging a node 50 pixels to the right and 30 pixels down:
// Get reference to a node
Node node = diagram.Nodes[0];
// Drag the node 50 pixels right and 30 pixels down
diagram.Drag(node, 50, 30);EndGroupAction()
Closes the grouping of actions that will be undone or restored as a whole in the SfDiagramComponent.
Declaration
public void EndGroupAction()Remarks
This method completes the transaction-like grouping mechanism started by StartGroupAction(). Once called, all actions performed between the start and end group calls will be treated as a single undoable/redoable unit. This method must be called after StartGroupAction() to properly close the action group.
Examples
The following example demonstrates how to properly close an action group:
// Start grouping actions
diagram.StartGroupAction();
// Perform operations
diagram.Delete(selectedNodes);
diagram.Add(newNode);
// End grouping - completes the transaction
diagram.EndGroupAction();
// Now undo will revert all operations as one unit
diagram.Undo();EndUpdateAsync()
Unlocks the diagram and triggers a visual update after a call to BeginUpdate().
Declaration
public Task EndUpdateAsync()Returns
| Type |
|---|
| System.Threading.Tasks.Task |
Remarks
Use this method to complete a batch update started with BeginUpdate(). It applies all pending property changes and refreshes the diagram.
ExportAsync(DiagramExportFormat, DiagramExportSettings)
Exports the SfDiagramComponent to a base64 string in the specified file format.
Declaration
public Task<string[]> ExportAsync(DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramExportFormat | fileFormat | A DiagramExportFormat value specifying the export format for the rendered diagram. |
| DiagramExportSettings | exportSettings | A DiagramExportSettings object containing configuration settings such as page dimensions, orientation, margins, and export region. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task<System.String[]> | A System.Threading.Tasks.Task<> that represents the asynchronous export operation. The task result contains an array of base64 encoded strings representing the exported diagram in the specified file format, or null if the export operation fails. |
Remarks
The method supports various export formats including PNG, JPEG, and SVG. Export settings allow customization of page dimensions, orientation, margins, and the specific region of the diagram to export.
Examples
The following example demonstrates how to export a diagram to PNG format with custom settings:
DiagramExportSettings export = new DiagramExportSettings();
export.Region = DiagramPrintExportRegion.PageSettings;
export.PageWidth = 816;
export.PageHeight = 1054;
export.Orientation = PageOrientation.Landscape;
export.FitToPage = true;
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 0, Height = 0 };
//To export the diagram
string[] base64 = await diagram.ExportAsync(DiagramExportFormat.PNG, export);ExportAsync(String, DiagramExportFormat, DiagramExportSettings)
Exports the rendered SfDiagramComponent to various file formats including JPEG, PNG, SVG, BMP, and PDF.
Declaration
public Task ExportAsync(string fileName, DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | fileName | A System.String specifying the filename without extension for the exported file. |
| DiagramExportFormat | fileFormat | A DiagramExportFormat value specifying the export format for the rendered diagram. |
| DiagramExportSettings | exportSettings | A DiagramExportSettings object containing configuration settings to customize the export operation. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous export operation. The task completes when the file has been successfully exported and downloaded. |
Remarks
The diagram supports multiple export formats with customizable settings for region, page dimensions, orientation, margins, and clipping bounds.
Examples
The following example demonstrates how to export a diagram with custom settings:
DiagramExportSettings export = new DiagramExportSettings();
export.Region = DiagramPrintExportRegion.PageSettings;
export.PageWidth = 816;
export.PageHeight = 1054;
export.Orientation = PageOrientation.Landscape;
export.FitToPage = true;
export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 0, Height = 0 };
//To export the diagram
await diagram.ExportAsync("diagram", format, export);FitToPage(FitOptions)
Fits the diagram pages to the viewport based on the specified FitOptions configuration.
Declaration
public void FitToPage(FitOptions options = null)Parameters
| Type | Name | Description |
|---|---|---|
| FitOptions | options | A FitOptions object that specifies the configuration settings to control how the diagram should be fitted to the page. If null, default fitting behavior will be applied. |
Remarks
This method adjusts the diagram's zoom level and position to fit the diagram content within the available viewport area.
The fitting behavior is controlled by the provided options parameter, which allows customization of the fit mode,
target region, and other display preferences.
Examples
The following example demonstrates how to fit a diagram to the page with specified options:
<SfDiagramComponent Width="1000px" Height="1000px"></SfDiagramComponent>
@code
{
SfDiagramComponent Diagram;
FitOptions Options = new FitOptions(){
Mode = FitMode.Both,
Region = DiagramRegion.PageSetting};
Diagram.FitToPage(Options);
}GetObject(String)
Retrieves a diagram object (node or connector) from the SfDiagramComponent based on the specified identifier.
Declaration
public IDiagramObject GetObject(string name)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | name | A System.String containing the unique identifier of the node or connector to retrieve. Cannot be null or empty. |
Returns
| Type | Description |
|---|---|
| IDiagramObject | An IDiagramObject representing the found node or connector, or null if no object with the specified identifier exists in the diagram. |
Remarks
This method first searches for a node with the given identifier using Syncfusion.Blazor.Diagram.SfDiagramComponent.GetNode(System.String). If no node is found, it then searches for a connector using Syncfusion.Blazor.Diagram.SfDiagramComponent.GetConnector(System.String).
Examples
This example demonstrates how to retrieve a diagram object by its identifier and check its type.
// Get a diagram object by its ID
IDiagramObject diagramObject = diagram.GetObject("node1");GetPageBounds(Nullable<Double>, Nullable<Double>)
Gets the bounds of the page within the SfDiagramComponent with optional origin point adjustments.
Declaration
public DiagramRect GetPageBounds(Nullable<double> originX = null, Nullable<double> originY = null)Parameters
| Type | Name | Description |
|---|---|---|
| System.Nullable<System.Double> | originX | An optional System.Double value specifying the X-coordinate origin for calculating page bounds. If null, uses the default origin calculation. |
| System.Nullable<System.Double> | originY | An optional System.Double value specifying the Y-coordinate origin for calculating page bounds. If null, uses the default origin calculation. |
Returns
| Type | Description |
|---|---|
| DiagramRect | A DiagramRect object representing the calculated page bounds with the specified or default origin coordinates. |
Remarks
The bounds calculation can be adjusted by providing custom origin coordinates through the originX and originY parameters.
The returned DiagramRect contains the X, Y coordinates of the top-left corner and the width and height of the bounding rectangle that encompasses all diagram content.
Examples
The following example demonstrates how to get page bounds with and without custom origin points:
<SfDiagramComponent @ref="diagram"></SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
private void GetDiagramBounds()
{
DiagramRect defaultBounds = diagram.GetPageBounds();
// Get page bounds with custom origin
DiagramRect customBounds = diagram.GetPageBounds(100, 50);
}
}Group()
Groups the selected nodes and connectors in the SfDiagramComponent into a single group container.
Declaration
public void Group()Remarks
This method creates a logical grouping of currently selected diagram elements
Examples
The following example demonstrates how to group selected elements in a diagram.
// Select multiple nodes and connectors first
diagram.SelectAll();
// Group the selected elements
diagram.Group();HideTooltipAsync(IDiagramObject)
Hides the tooltip for the specified diagram element when the tooltip is configured with custom open mode.
Declaration
public Task HideTooltipAsync(IDiagramObject element)Parameters
| Type | Name | Description |
|---|---|---|
| IDiagramObject | element | An IDiagramObject representing the diagram element (node or connector) whose tooltip should be hidden. The element must have a tooltip configured with OpensOn set to "Custom". |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the operation. The task completes when the tooltip has been successfully hidden. |
Remarks
The method will only hide tooltips that are currently visible and configured for custom control. Tooltips with automatic open modes are not affected by this method.
Examples
The following example demonstrates how to hide a tooltip for a node with custom tooltip configuration:
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Node node1 = new Node() { ID = "node1", OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1", OpensOn = "Auto",} };
nodes.Add(node1);
Node node2 = new Node() { ID = "node2", OffsetX = 240, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node2", OpensOn = "Custom",} };
nodes.Add(node2);
Connector connector1=new Connector{ ID="Connector1" , Tooltip=new DiagramTooltip(){Content="connector1"} };
}
public async void HideTooltip()
{
await diagram.HideTooltipAsync(diagram.nodes[1] as NodeBase);
}
}InsertDataAsync(Object, String, Query, Int32)
Inserts data into the SfDiagramComponent data source asynchronously, allowing users to add new records to a specified table.
Declaration
public Task InsertDataAsync(object data, string tableName = null, Query query = null, int position = 0)Parameters
| Type | Name | Description |
|---|---|---|
| System.Object | data | The data object to insert into the data source. This should match the structure expected by the DataManager. |
| System.String | tableName | The name of the table where the data will be inserted. If null, the data will be inserted into the default table. |
| Query | query | The Query which can be executed against the data source to specify insertion criteria. If null, default insertion behavior is applied. |
| System.Int32 | position | The position at which to insert the data within the collection. |
Returns
| Type |
|---|
| System.Threading.Tasks.Task |
Remarks
After successful insertion, the diagram automatically refreshes its layout to reflect the new data structure.
Examples
<button class="btn btn-primary" @onclick="Insert">Insert</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
<DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
<SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</DataSourceSettings>
<Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{
SfDiagramComponent diagram;
public async void Insert()
{
EmployeeDetails employeeDetails = new EmployeeDetails()
{
EmployeeID = 6,
Name = "Michael",
Designation = "Team Lead",
ReportsTo = "5",
Colour = "Orange"
};
await diagram.InsertDataAsync(employeeDetails);
}
} LoadDiagramAsync(String, Boolean)
Asynchronously loads and deserializes diagram data from JSON format into the SfDiagramComponent.
Declaration
public Task LoadDiagramAsync(string data, bool isClassicData = false)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | data | A System.String containing the JSON representation of the diagram data. The parameter cannot be null or empty. |
| System.Boolean | isClassicData | A System.Boolean indicating whether the |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous load operation. The task completes when the diagram data has been successfully parsed and applied to the component. |
Remarks
This method performs asynchronous deserialization of JSON diagram data and updates the current diagram instance with the loaded content. All existing nodes, connectors, and diagram properties will be replaced with the data from the JSON.
Examples
Loading current format diagram data:
await diagramComponent.LoadDiagramAsync(diagramJson);LoadDiagramFromMermaidAsync(String)
Loads and generates a SfDiagramComponent from the given Mermaid text data.
Declaration
public Task LoadDiagramFromMermaidAsync(string mermaidText)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | mermaidText | The Mermaid text data used to generate the SfDiagramComponent. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation of loading the diagram. |
Remarks
This method is supported only for diagrams that use the MindMap or Flowchart layout types and sequence diagram.
Examples
The following example demonstrates how to use the method to load a diagram from Mermaid text format and save it.
<SfDiagramComponent @ref="diagram" Width="100%" Height="800px" Nodes="@nodes" Connectors="@connectors">
<Layout Type="LayoutType.MindMap">
</Layout>
</SfDiagramComponent>
@code {
string data;
private void SaveAsMermaid()
{
data = diagram.SaveDiagramAsMermaid();
}
private async void LoadMermaidDiagram()
{
await diagram.LoadDiagramFromMermaidAsync(data);
}
}Nudge(Direction, Nullable<Int32>)
Repositions the selected objects in the SfDiagramComponent by the specified delta amount in the given direction.
Declaration
public void Nudge(Direction direction, Nullable<int> nudgeDelta = null)Parameters
| Type | Name | Description |
|---|---|---|
| Direction | direction | A Direction value specifying the direction in which to move the selected elements. Valid directions include Up, Down, Left, and Right. |
| System.Nullable<System.Int32> | nudgeDelta | An optional System.Int32 representing the distance in pixels by which to reposition the selected objects. If null, the default nudge distance of 1 pixel is used. |
Remarks
By default, nudge commands move selected elements by 1 pixel in the specified direction. This can be overridden by providing a custom delta value.
Examples
The following example demonstrates how to nudge selected objects in different directions:
private void Nudge()
{
// Repositions the selected objects by 50 pixels towards down direction
diagram.Nudge(Direction.Down, 50);
}OnAfterRenderAsync(Boolean)
Method invoked after each time the component has been rendered.
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)Parameters
| Type | Name | Description |
|---|---|---|
| System.Boolean | firstRender | Set to true for the first time component rendering; otherwise gets false. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing any asynchronous operation. |
Overrides
OnInitializedAsync()
Method invoked when the component is ready to start.
Declaration
protected override Task OnInitializedAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing any asynchronous operation. |
Overrides
OnParametersSetAsync()
Method invoked when any changes in component state occur.
Declaration
protected override Task OnParametersSetAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | ="Task". |
OnPropertyChanged(String, Object, Object, IDiagramObject)
Handles property change notifications and updates all related properties in the SfDiagramComponent.
Declaration
public void OnPropertyChanged(string propertyName, object newVal, object oldVal, IDiagramObject parent)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | propertyName | A System.String that specifies the name of the property that has changed. Can be null if multiple properties are being updated. |
| System.Object | newVal | An System.Object that contains the new value being assigned to the property. Can be null if the property is being cleared. |
| System.Object | oldVal | An System.Object that contains the previous value of the property before the change. Can be null if the property had no previous value. |
| IDiagramObject | parent | An IDiagramObject that represents the parent object containing the property being changed. |
Remarks
This method is typically called internally when property values change to ensure all dependent properties and UI elements are properly synchronized.
Pan(Double, Double, DiagramPoint)
Pans the SfDiagramComponent control to the specified horizontal and vertical offsets.
Declaration
public void Pan(double horizontalOffset, double verticalOffset, DiagramPoint focusedPoint = null)Parameters
| Type | Name | Description |
|---|---|---|
| System.Double | horizontalOffset | A System.Double value that defines the horizontal distance in pixels to which the diagram should be scrolled. |
| System.Double | verticalOffset | A System.Double value that defines the vertical distance in pixels to which the diagram should be scrolled. |
| DiagramPoint | focusedPoint | An optional DiagramPoint that specifies the focal point for the panning operation. The default value is null. |
Remarks
This method programmatically scrolls the diagram viewport by the specified offsets and temporarily changes the cursor to "grabbing" during the operation.
Examples
This example demonstrates how to pan the diagram to specific coordinates.
// Pan the diagram 100 pixels to the right and 50 pixels down
diagramComponent.Pan(100, 50);Paste(DiagramObjectCollection<NodeBase>)
Pastes diagram elements into the SfDiagramComponent from either the internal clipboard or a specified collection of cloned elements.
Declaration
public void Paste(DiagramObjectCollection<NodeBase> DiagramElements = null)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramObjectCollection<NodeBase> | DiagramElements | A DiagramObjectCollection<T> containing the cloned diagram elements to paste. If null or empty, the method pastes elements from the internal clipboard that were previously copied or cut. The default value is null. |
Remarks
This method is commonly used in clipboard workflows alongside Copy() and Cut() operations to provide standard editing functionality.
The elements in the DiagramElements parameter must be clones of existing diagram elements to ensure proper paste behavior.
Examples
The following example demonstrates both paste scenarios - from clipboard and from a specific collection:
<SfDiagramComponent @ref="diagram"></SfDiagramComponent>
@code
{
SfDiagramComponent diagram;
private void PasteFromClipboard()
{
// Paste elements from internal clipboard (after Copy or Cut)
diagram.Paste();
}
private void PasteSpecificElements()
{
DiagramObjectCollection<NodeBase> elementsToPaste = new DiagramObjectCollection<NodeBase>();
elementsToPaste.Add(diagram.Nodes[0].Clone());
elementsToPaste.Add(diagram.Nodes[1].Clone());
diagram.Paste(elementsToPaste);
}
}PrintAsync(DiagramPrintSettings)
Prints the SfDiagramComponent pages based on the specified DiagramPrintSettings.
Declaration
public Task PrintAsync(DiagramPrintSettings printSettings)Parameters
| Type | Name | Description |
|---|---|---|
| DiagramPrintSettings | printSettings | A DiagramPrintSettings object that specifies the configuration settings to print the diagram, including page dimensions, orientation, margins, and print region. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task that represents the asynchronous print operation. The task completes when the diagram is successfully sent to the browser's print preview window for printing. |
Remarks
This method sends the diagram content to the browser's native print dialog, allowing users to select printer options and complete the printing process.
Examples
The following example demonstrates how to print a diagram with custom settings:
DiagramPrintSettings print = new DiagramPrintSettings();
print.PageWidth = 816;
print.PageHeight = 1054;
print.Region = DiagramPrintExportRegion.PageSettings;
print.FitToPage = true;
print.Orientation = PageOrientation.Landscape;
print.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 };
await diagram.PrintAsync(print);ReadDataAsync(Query)
Reads data from the data source based on the specified query for the SfDiagramComponent.
Declaration
public Task<IEnumerable<object>> ReadDataAsync(Query query = null)Parameters
| Type | Name | Description |
|---|---|---|
| Query | query | A Query object that specifies the criteria for fetching data from the data source. If null, a default query will be used to retrieve all available data. |
Returns
| Type |
|---|
| System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<System.Object>> |
Remarks
This method requires the DataSourceSettings and its DataManager to be properly initialized before execution.
Examples
<button class="btn btn-primary" @onclick="Read">Read</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
<DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
<SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</DataSourceSettings>
<Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{
SfDiagramComponent diagram;
public async void Read()
{
List<object> Details = (List<object>)await diagram.ReadDataAsync();
}
} Redo()
Restores the last undone action in the SfDiagramComponent.
Declaration
public void Redo()Remarks
This method re-applies the most recently undone operation, effectively reversing an undo action. The redo operation is only available when the UndoRedo constraint is enabled.
Examples
The following example demonstrates how to redo a previously undone operation in a diagram.
SfDiagramComponent diagram = new SfDiagramComponent();
// Perform some operation, then undo it
diagram.Undo();
// Redo the undone action
diagram.Redo();RefreshDataSourceAsync()
Asynchronously refreshes the layout of the SfDiagramComponent based on changes in the data source.
Declaration
public Task RefreshDataSourceAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous refresh operation. The task completes when the data source has been processed and the diagram layout has been updated. |
Remarks
This method should be called when the underlying data source has been modified and the diagram needs to reflect those changes.
RemoveChild(NodeGroup, NodeBase)
Removes a child node or connector from the specified NodeGroup.
Declaration
public void RemoveChild(NodeGroup group, NodeBase child)Parameters
| Type | Name | Description |
|---|---|---|
| NodeGroup | group | The NodeGroup from which to remove the child. Can be null. |
| NodeBase | child | The NodeBase (node or connector) to be removed from the group. |
Remarks
The method removes a child node or connector from the specified group by clearing the child's parent reference and updating the group's children collection.
Examples
This example demonstrates how to remove a child node from a group.
// Remove the child from the group
diagram.RemoveChild(group, childNode);ResetZoom()
Resets the zoom level of the SfDiagramComponent to its default state and restores the viewport to the origin position.
Declaration
public void ResetZoom()Remarks
This method clears all panning operations, removes panning relations, and resets both the zoom level to 1.0.
Examples
Reset the diagram view to default zoom and position.
<SfDiagramComponent @ref="diagram" Width="600px" Height="600px" Nodes="nodes">
<SnapSettings Constraints="@SnapConstraints.ShowLines"></SnapSettings>
</SfDiagramComponent>
@code {
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node = new Node()
{
ID = "node1",
Width = 50,
Height = 50,
OffsetX = 150,
OffsetY = 100,
};
nodes.Add(node);
}
private void ResetDiagramView()
{
// Reset zoom level to 100% and position to origin
diagram.ResetZoom();
}
}Rotate(IDiagramObject, Double, DiagramPoint)
Rotates the specified diagram objects by the given angle around a pivot point in the SfDiagramComponent.
Declaration
public bool Rotate(IDiagramObject obj, double angle, DiagramPoint pivot = null)Parameters
| Type | Name | Description |
|---|---|---|
| IDiagramObject | obj | An IDiagramObject representing the node or connector to be rotated. Cannot be null. |
| System.Double | angle | A System.Double value specifying the rotation angle in degrees. Positive values rotate clockwise, negative values rotate counter-clockwise. |
| DiagramPoint | pivot | An optional DiagramPoint representing the reference point around which the rotation occurs. If null, the object rotates around its center point. The default value is null. |
Returns
| Type | Description |
|---|---|
| System.Boolean | A System.Boolean value indicating whether the rotation operation was successful. Returns true if the object was rotated successfully; otherwise, false. |
Remarks
This method performs an immediate rotation transformation on the specified diagram object. The rotation is applied relative to the current orientation of the object.
Examples
The following example demonstrates how to rotate a node by 45 degrees around its center:
// Rotate a node 45 degrees clockwise around its center
bool success = diagram.Rotate(selectedNode, 45);
// Rotate a connector 90 degrees counter-clockwise around a custom pivot point
var customPivot = new DiagramPoint { X = 100, Y = 100 };
bool rotated = diagram.Rotate(connector, -90, customPivot);SaveDiagram()
Serializes the current state of the SfDiagramComponent to a JSON string representation.
Declaration
public string SaveDiagram()Returns
| Type | Description |
|---|---|
| System.String | A System.String containing the serialized JSON data representing the complete diagram state, including nodes, connectors, and configuration settings. |
Remarks
The serialized data includes all diagram elements, their properties, layout information, and current configuration settings. The returned JSON string can be used with load operations to restore the diagram to its current state.
Examples
The following example demonstrates how to save a diagram's current state to a JSON string:
SfDiagramComponent diagram = new SfDiagramComponent();
string diagramJson = diagram.SaveDiagram();SaveDiagramAsMermaid()
Serializes the current diagram into Mermaid text format.
Declaration
public string SaveDiagramAsMermaid()Returns
| Type | Description |
|---|---|
| System.String | A string representation of the diagram in Mermaid text format. |
Remarks
This method is supported only for diagrams that use the MindMap or Flowchart layout types.
Examples
The following example demonstrates how to use the method to save a diagram and then load it using Mermaid text format.
<SfDiagramComponent @ref="diagram" Width="100%" Height="800px" Nodes="@nodes" Connectors="@connectors">
<Layout Type="LayoutType.MindMap">
</Layout>
</SfDiagramComponent>
@code {
string data;
private void SaveAsMermaid()
{
data = diagram.SaveDiagramAsMermaid();
}
private async void LoadMermaidDiagram()
{
await diagram.LoadDiagramFromMermaidAsync(data);
}
}Scale(IDiagramObject, Double, Double, DiagramPoint)
Scales the given IDiagramObject by the specified horizontal and vertical ratios relative to a pivot point.
Declaration
public bool Scale(IDiagramObject obj, double sx, double sy, DiagramPoint pivot)Parameters
| Type | Name | Description |
|---|---|---|
| IDiagramObject | obj | An IDiagramObject representing the diagram object to be resized. |
| System.Double | sx | A System.Double value defining the ratio by which the object will be horizontally scaled. |
| System.Double | sy | A System.Double value defining the ratio by which the object will be vertically scaled. |
| DiagramPoint | pivot | A DiagramPoint representing the reference point with respect to which the object will be resized. |
Returns
| Type | Description |
|---|---|
| System.Boolean | A System.Boolean value indicating whether the scaling operation respects boundary constraints. Returns true if boundary constraints are satisfied, false otherwise. |
Remarks
The method handles special cases including BPMN annotations, container children, swimlanes, and selection groups, automatically updating the diagram page after the scaling operation.
Examples
Scale a node to double its size using its center as the pivot point:
Node node = diagram.Nodes[0];
DiagramPoint centerPoint = new DiagramPoint(node.OffsetX, node.OffsetY);
bool constraintsSatisfied = diagram.Scale(node, 2.0, 2.0, centerPoint);Select(ObservableCollection<IDiagramObject>, Nullable<Boolean>)
Selects the specified collection of diagram objects in the SfDiagramComponent.
Declaration
public void Select(ObservableCollection<IDiagramObject> objects, Nullable<bool> multipleSelection)Parameters
| Type | Name | Description |
|---|---|---|
| System.Collections.ObjectModel.ObservableCollection<IDiagramObject> | objects | An System.Collections.ObjectModel.ObservableCollection<> containing the nodes and connectors to be selected. If null or empty, no selection operation is performed. |
| System.Nullable<System.Boolean> | multipleSelection | A System.Boolean value indicating whether to preserve existing selections. When true, adds the specified objects to the current selection. When false or null, clears existing selections before selecting the new objects. The default value is false. |
Remarks
This method programmatically selects diagram objects and updates the selection state of the diagram component.
Examples
This example demonstrates how to select specific nodes and connectors in the diagram.
ObservableCollection objectsToSelect = new ObservableCollection<IDiagramObject>();
objectsToSelect.Add(node1);
objectsToSelect.Add(connector1);
diagram.Select(objectsToSelect, false);SelectAll()
Selects all objects in the SfDiagramComponent.
Declaration
public void SelectAll()Remarks
Objects that are locked or have their Constraints set to prevent selection will not be included in the selection.
Examples
The following example demonstrates how to select all objects in a diagram:
SfDiagramComponent diagram = new SfDiagramComponent();
diagram.SelectAll();SendBackward()
Visually moves the selected Node, Connector, and group behind the underlying Node or Connector or group in the z-order.
Declaration
public void SendBackward()Remarks
This method changes the z-order of the selected diagram objects by moving them one layer backward in the visual stack.
Examples
This example demonstrates how to select a node and move it backward in the z-order.
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100};
nodes.Add(node1);
Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 };
nodes.Add(node2);
Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 };
nodes.Add(node3);
}
private void SendBackward()
{
diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[2] });
diagram.SendBackward();
}
}SendToBack()
Visually moves the selected Node, Connector, and Group() behind all other overlapped diagram objects in the SfDiagramComponent.
Declaration
public void SendToBack()Remarks
This method changes the z-order of the currently selected diagram objects by moving them to the back of the visual stack.
Examples
This example demonstrates how to select a node and send it to the back of other overlapping objects.
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code {
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node1 = new Node() { ID = "node1", Width = 90, Height = 60, OffsetX = 100, OffsetY = 100};
nodes.Add(node1);
Node node2 = new Node() { ID = "node2", Width = 90, Height = 60, OffsetX = 240, OffsetY = 100 };
nodes.Add(node2);
Node node3 = new Node() { ID = "node3", Width = 90, Height = 60, OffsetX = 160, OffsetY = 90 };
nodes.Add(node3);
}
private void SendToBack()
{
diagram.Select(new ObservableCollection<IDiagramObject>() { diagram.Nodes[2] });
diagram.SendToBack();
}
}SetAlign(AlignmentOptions, DiagramObjectCollection<NodeBase>, AlignmentMode)
Aligns the group of objects with reference to the first object in the group using the specified alignment options.
Declaration
public void SetAlign(AlignmentOptions alignmentOptions, DiagramObjectCollection<NodeBase> objects = null, AlignmentMode alignmentMode)Parameters
| Type | Name | Description |
|---|---|---|
| AlignmentOptions | alignmentOptions | An AlignmentOptions value that specifies how the objects should be aligned (e.g., left, right, top, bottom, center). |
| DiagramObjectCollection<NodeBase> | objects | A DiagramObjectCollection<T> containing the nodes and connectors to be aligned. If null, the currently selected objects in the diagram will be used for alignment. |
| AlignmentMode | alignmentMode | An AlignmentMode value that defines the alignment reference mode. The default value is Object. |
Remarks
The alignment is performed relative to the first object in the collection, which serves as the reference point for positioning other objects.
Examples
The following example demonstrates how to align selected nodes to the left:
DiagramObjectCollection nodesToAlign = new DiagramObjectCollection<NodeBase> { node1, node2, node3 };
diagramComponent.SetAlign(AlignmentOptions.Center, nodesToAlign, AlignmentMode.Selector);SetDistribute(DistributeOptions, DiagramObjectCollection<NodeBase>)
Arranges the specified group of nodes and connectors at equal intervals using the specified distribution option.
Declaration
public void SetDistribute(DistributeOptions option, DiagramObjectCollection<NodeBase> objects = null)Parameters
| Type | Name | Description |
|---|---|---|
| DistributeOptions | option | A DistributeOptions value that specifies how the objects should be distributed. |
| DiagramObjectCollection<NodeBase> | objects | A DiagramObjectCollection<T> containing the nodes and connectors to be distributed. If null or not provided, the currently selected objects in the diagram will be used. |
Remarks
The distribution operation calculates equal intervals between the specified objects based on their current positions and the chosen distribution option.
Examples
The following example demonstrates how to distribute selected nodes horizontally with equal spacing:
SfDiagramComponent diagram = new SfDiagramComponent();
DiagramObjectCollection nodesToDistribute = new DiagramObjectCollection<NodeBase>();
nodesToDistribute.Add(node1);
nodesToDistribute.Add(node2);
nodesToDistribute.Add(node3);
diagram.SetDistribute(DistributeOptions.RightToLeft, nodesToDistribute);SetSameSize(SizingMode, DiagramObjectCollection<NodeBase>)
Scales the specified objects to match the size of the first object in the collection using the SfDiagramComponent.
Declaration
public void SetSameSize(SizingMode sizingType, DiagramObjectCollection<NodeBase> objects = null)Parameters
| Type | Name | Description |
|---|---|---|
| SizingMode | sizingType | A SizingMode value that specifies the sizing operation to perform (width, height, or both dimensions). |
| DiagramObjectCollection<NodeBase> | objects | A DiagramObjectCollection<T> containing the nodes and connectors to resize. If null or not provided, the currently selected objects will be used. |
Remarks
This method resizes all specified objects to match the dimensions of the first object in the collection based on the specified sizingType.
Examples
The following example demonstrates how to resize selected nodes to have the same width:
DiagramObjectCollection nodesToResize = new DiagramObjectCollection<NodeBase> { node1, node2, node3 };
diagram.SetSameSize(SizingMode.Size, nodesToResize);ShouldRender()
This method returns a boolean to indicate if a component’s UI can be rendered.
Declaration
protected override bool ShouldRender()Returns
| Type | Description |
|---|---|
| System.Boolean | bool |
ShowTooltipAsync(IDiagramObject)
Shows the tooltip for the specified diagram object when the tooltip is configured with custom open mode.
Declaration
public Task ShowTooltipAsync(IDiagramObject obj)Parameters
| Type | Name | Description |
|---|---|---|
| IDiagramObject | obj | An IDiagramObject representing the diagram element (node or connector) for which the tooltip should be displayed. The object must have a tooltip configured with OpensOn set to "Custom". |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation of displaying the tooltip. |
Remarks
The tooltip will only be shown if the target object has a valid Syncfusion.Blazor.Diagram.SfDiagramComponent.DiagramTooltip configuration.
Examples
<SfDiagramComponent @ref="diagram" Width="1000px" Height="500px" @bind-Nodes="@nodes"></SfDiagramComponent>
@code{
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
Node node1 = new Node() { ID = "node1",OffsetX = 100, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node1", OpensOn = "Auto",} };
nodes.Add(node1);
Node node2 = new Node() { ID = "node2", OffsetX = 240, OffsetY = 100, Tooltip=new DiagramTooltip(){Content="node2", OpensOn = "Custom",} };
nodes.Add(node2);
Connector connector1=new Connector{ ID="Connector1" , Tooltip=new DiagramTooltip(){Content="connector1"} };
connectors.Add(connector1);
}
public async void ShowTooltip()
{
await diagram.ShowTooltipAsync(diagram.nodes[1] as NodeBase);
}
} StartGroupAction()
Starts the grouping of actions that will be undone or restored as a whole in the SfDiagramComponent.
Declaration
public void StartGroupAction()Remarks
This method begins a transaction-like grouping mechanism for diagram operations, allowing multiple individual actions to be treated as a single unit for undo/redo operations. All actions performed between StartGroupAction() and EndGroupAction() will be undone or redone together.
Examples
The following example demonstrates how to group multiple diagram operations:
// Start grouping actions
diagram.StartGroupAction();
// Perform multiple operations
diagram.Add(node1);
diagram.Add(node2);
diagram.Add(connector);
// End grouping - all above actions will be treated as one unit
diagram.EndGroupAction();StartTextEdit(IDiagramObject, String)
Initiates the text editing mode for the specified annotation of a node or connector in the SfDiagramComponent.
Declaration
public void StartTextEdit(IDiagramObject diagramObject, string id = null)Parameters
| Type | Name | Description |
|---|---|---|
| IDiagramObject | diagramObject | An IDiagramObject representing the node or connector that contains the annotation to be edited. This can be a Node, Connector, Swimlane, SwimlaneHeader, or ContainerHeader. If null, no editing operation will be performed. |
| System.String | id | A System.String specifying the unique identifier of the annotation to be edited within the diagram object. If null or not provided, the first available annotation will be selected for editing. |
Remarks
This method enables in-place text editing functionality for annotations associated with diagram objects. The editing session allows users to modify the text content directly within the diagram interface using an interactive text editor.
Undo()
Restores the last action that was performed in the SfDiagramComponent.
Declaration
public void Undo()Remarks
This method reverts the most recent operation performed on the diagram, such as adding, deleting, or modifying nodes and connectors. The undo operation is only available when the UndoRedo constraint is enabled.
Examples
The following example demonstrates how to undo the last operation in a diagram.
// Create a diagram with undo/redo enabled
SfDiagramComponent diagram = new SfDiagramComponent();
// Perform some operation (e.g., add a node)
// Then undo the last action
diagram.Undo();Ungroup()
Ungroups the selected nodes and connectors in the SfDiagramComponent.
Declaration
public void Ungroup()Remarks
The ungrouping operation is performed through the diagram's command handler and affects only the currently selected grouped elements.
Examples
The following example demonstrates how to ungroup selected elements in a diagram.
SfDiagramComponent diagram = new SfDiagramComponent();
// Ungroup the selected grouped elements
diagram.Ungroup();UnSelect(IDiagramObject)
Removes the specified object from the selection list of the SfDiagramComponent.
Declaration
public void UnSelect(IDiagramObject obj)Parameters
| Type | Name | Description |
|---|---|---|
| IDiagramObject | obj | An IDiagramObject representing the diagram object to be removed from the selection list. If the object is null or not currently selected, no action is performed. |
Remarks
This method only removes objects that are currently in the selection list. If the specified object is not selected, the method performs no operation.
Examples
This example demonstrates how to unselect a specific node from the diagram selection.
Node targetNode = diagram.Nodes[0];
diagram.UnSelect(targetNode);UpdateDataAsync(String, Object, String, Query, Object, IDictionary<String, Object>)
Updates data in the data source asynchronously based on the specified key field and updated data. This operation modifies the data set by altering the identified records.
Declaration
public Task UpdateDataAsync(string keyField, object data, string tableName = null, Query query = null, object original = null, IDictionary<string, object> updateProperties = null)Parameters
| Type | Name | Description |
|---|---|---|
| System.String | keyField | The key field to identify the data to update. |
| System.Object | data | The updated data. |
| System.String | tableName | The name of the table where the data will be updated. Optional. |
| Query | query | The query which can be executed against data source. Optional. |
| System.Object | original | The original data. Uses this original data for sending changed items alone to the server. Optional. |
| System.Collections.Generic.IDictionary<System.String, System.Object> | updateProperties | The properties to update. Optional. |
Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A task that represents the asynchronous operation. |
Examples
<button class="btn btn-primary" @onclick="Update">Update</button>
<SfDiagramComponent ID="diagram" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
<DataSourceSettings ID = "EmployeeID" ParentID="ReportsTo">
<SfDataManager Url = "api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
</DataSourceSettings>
<Layout Type = "Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
</SfDiagramComponent>
@code{
SfDiagramComponent diagram;
public async void Update()
{
EmployeeDetails employeeDetails = new EmployeeDetails()
{
EmployeeID = 6,
Name = "Michael",
Designation = "Product Manager",
ReportsTo = "1",
Colour = "Green"
};
await diagram.UpdateDataAsync("EmployeeID", employeeDetails);
}
} UpdateFromModelAsync()
Asynchronously updates the diagram's UI components to reflect the current state of the model data.
Declaration
public Task UpdateFromModelAsync()Returns
| Type | Description |
|---|---|
| System.Threading.Tasks.Task | A System.Threading.Tasks.Task representing the asynchronous operation. The task completes when all diagram elements have been updated and the UI has been refreshed. |
Remarks
This method handles the synchronization between the underlying data model and the visual representation. It performs a complete refresh of all visual elements, updating their properties, positions, and connections based on changes made to the model since the last update.
Examples
// Manually update diagram after modifying the model
private async Task AddNewMessage()
{
// Add a new message to the model
umlModel.Messages.Add(new UmlSequenceMessage()
{
ID = "MSG4",
Content = "New interaction",
FromParticipantID = "Client",
ToParticipantID = "Server"
});
// Manually trigger diagram update
await UpdateFromModelAsync();
}Zoom(Double, DiagramPoint)
Allows the user to zoom in or zoom out the SfDiagramComponent by a specified factor.
Declaration
public void Zoom(double factor, DiagramPoint focusPoint)Parameters
| Type | Name | Description |
|---|---|---|
| System.Double | factor | A System.Double value that defines the factor by which the diagram is zoomed. Values greater than 1.0 zoom in, values between 0.0 and 1.0 zoom out. |
| DiagramPoint | focusPoint | A DiagramPoint that defines the point with respect to which the diagram has to be zoomed. The zoom operation will be centered around this point. |
Remarks
This method programmatically controls the zoom level of the diagram and automatically handles scroll actions and settings updates during the zoom operation.
Examples
The following example demonstrates how to zoom the diagram:
DiagramPoint centerPoint = new DiagramPoint(200, 150);
diagramComponent.Zoom(0.5, centerPoint);