Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfDiagramComponent - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class SfDiagramComponent

    Renders the diagram. It contains all the properties of the diagram to be rendered.

    Inheritance
    System.Object
    SfBaseComponent
    SfDiagramComponent
    Implements
    IDiagramObject
    System.ICloneable
    Inherited Members
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    Namespace: Syncfusion.Blazor.Diagram
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class SfDiagramComponent : SfBaseComponent, IDiagramObject, ICloneable

    Constructors

    SfDiagramComponent()

    Declaration
    public SfDiagramComponent()

    Properties

    BridgeDirection

    Defines the direction of the bridge that is inserted when the connector segments are intersected.

    Declaration
    public Direction BridgeDirection { get; set; }
    Property Value
    Type Description
    Direction

    BridgeDirectionChanged

    Specifies the callback to trigger when the bridge direction changes.

    Declaration
    public EventCallback<Direction> BridgeDirectionChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<Direction>

    ChildContent

    Sets the child content of the diagram component.

    Declaration
    public RenderFragment ChildContent { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    Click

    Triggers when a node, connector or diagram is clicked.

    Declaration
    public EventCallback<ClickEventArgs> Click { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ClickEventArgs>

    CollectionChanged

    Triggers when the node/connector is added or removed from the diagram.

    Declaration
    public EventCallback<CollectionChangedEventArgs> CollectionChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<CollectionChangedEventArgs>

    CollectionChanging

    Triggers before the node/connector is add or remove from the diagram.

    Declaration
    public EventCallback<CollectionChangingEventArgs> CollectionChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<CollectionChangingEventArgs>

    CommandManager

    Defines a set of custom commands and binds them with a set of desired key gestures.

    Declaration
    public CommandManager CommandManager { get; set; }
    Property Value
    Type Description
    CommandManager

    ConnectionChanged

    Triggers when the connector’s source or target point is connected or disconnected from the source or target.

    Declaration
    public EventCallback<ConnectionChangedEventArgs> ConnectionChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ConnectionChangedEventArgs>

    ConnectionChanging

    Triggers before the connector’s source or target point is connect or disconnect from the source or target.

    Declaration
    public EventCallback<ConnectionChangingEventArgs> ConnectionChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ConnectionChangingEventArgs>

    ConnectorCreating

    Helps to assign the default properties of the connector.

    Declaration
    public EventCallback<IDiagramObject> ConnectorCreating { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

    Connectors

    Defines a collection of connector objects, used to create links between two points, nodes or ports to represent the relationships between them.

    Declaration
    public DiagramObjectCollection<Connector> Connectors { get; set; }
    Property Value
    Type Description
    DiagramObjectCollection<Connector>

    ConnectorsChanged

    Specifies the callback to trigger when the connector changes.

    Declaration
    public EventCallback<DiagramObjectCollection<Connector>> ConnectorsChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Connector>>

    Constraints

    Enables/disables certain behaviors of the diagram.

    Declaration
    public DiagramConstraints Constraints { get; set; }
    Property Value
    Type Description
    DiagramConstraints

    ConstraintsChanged

    Specifies the callback to trigger when the constraint changes.

    Declaration
    public EventCallback<DiagramConstraints> ConstraintsChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramConstraints>

    ContextMenuSettings

    Represents a shortcut menu

    Declaration
    public ContextMenuSettings ContextMenuSettings { get; set; }
    Property Value
    Type Description
    ContextMenuSettings

    Created

    Triggers when Diagram component is rendered.

    Declaration
    public EventCallback<object> Created { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Object>
    Remarks

    The Created event notifies to perform the actions after the control is rendered in a page.

    Examples
    <SfDiagramComponent @ref="@Diagram"
    Width="100%"
    Height="700px"
    Nodes="nodes"
    Created="OnCreated">
    </SfDiagramComponent>
    @code
    {
    SfDiagramComponent Diagram;
    private void OnCreated(object args)
    {
    Diagram.Select(new ObservableCollection<IDiagramObject>() { Diagram.Nodes[2] });
    }
    }

    DataLoaded

    Triggers when the diagram layout is rendered completely.

    Declaration
    public EventCallback<object> DataLoaded { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.Object>

    DataSourceSettings

    Configures the data source that is to be bound with the diagram.

    Declaration
    public DataSourceSettings DataSourceSettings { get; set; }
    Property Value
    Type Description
    DataSourceSettings

    DiagramTemplates

    Represents the template of the diagram element.

    Declaration
    public DiagramTemplates DiagramTemplates { get; set; }
    Property Value
    Type Description
    DiagramTemplates

    DragDrop

    Triggers 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>

    Dragging

    Triggers when an element drags over another diagram element.

    Declaration
    public EventCallback<DraggingEventArgs> Dragging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DraggingEventArgs>

    DragLeave

    Triggers when a symbol is dragged outside of the diagram.

    Declaration
    public EventCallback<DragLeaveEventArgs> DragLeave { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DragLeaveEventArgs>

    DragStart

    Triggers when a symbol is dragged into the diagram from the symbol palette

    Declaration
    public EventCallback<DragStartEventArgs> DragStart { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DragStartEventArgs>

    DrawingObject

    Defines the object to be drawn using a drawing tool.

    Declaration
    public IDiagramObject DrawingObject { get; set; }
    Property Value
    Type Description
    IDiagramObject

    DrawingObjectChanged

    Specifies the callback to trigger when the drawing object changes.

    Declaration
    public EventCallback<IDiagramObject> DrawingObjectChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

    FixedUserHandleClick

    Triggers when a Fixed User Handle item is clicked.

    Declaration
    public EventCallback<FixedUserHandleClickEventArgs> FixedUserHandleClick { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<FixedUserHandleClickEventArgs>

    GetCustomCursor

    This method allows users to create their own cursor.

    Declaration
    public Func<DiagramElementAction, bool, string, string> GetCustomCursor { get; set; }
    Property Value
    Type Description
    System.Func<DiagramElementAction, System.Boolean, System.String, System.String>

    GetCustomTool

    This method allows users to customize the tool.

    Declaration
    public Func<DiagramElementAction, string, InteractionControllerBase> GetCustomTool { get; set; }
    Property Value
    Type Description
    System.Func<DiagramElementAction, System.String, InteractionControllerBase>

    Height

    Defines the height of the diagram.

    Declaration
    public string Height { get; set; }
    Property Value
    Type Description
    System.String

    HeightChanged

    Specifies the callback to trigger when the height changes.

    Declaration
    public EventCallback<string> HeightChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.String>

    HistoryChanged

    Triggers when a change is reverted or restored(undo/redo).

    Declaration
    public EventCallback<HistoryChangedEventArgs> HistoryChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<HistoryChangedEventArgs>

    HistoryManager

    Notifies when a change is reverted or restored.

    Declaration
    public DiagramHistoryManager HistoryManager { get; set; }
    Property Value
    Type Description
    DiagramHistoryManager

    InteractionController

    Defines the precedence of the interactive tools.

    Declaration
    public DiagramInteractions InteractionController { get; set; }
    Property Value
    Type Description
    DiagramInteractions

    InteractionControllerChanged

    Specifies the callback to trigger when the tool changes.

    Declaration
    public EventCallback<DiagramInteractions> InteractionControllerChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramInteractions>

    KeyDown

    Triggers when a user presses a key.

    Declaration
    public EventCallback<KeyEventArgs> KeyDown { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs>

    KeyUp

    Triggers when a user releases a key.

    Declaration
    public EventCallback<KeyEventArgs> KeyUp { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs>

    Layout

    Layout is used to auto-arrange the nodes in the Diagram area.

    Declaration
    public Layout Layout { get; set; }
    Property Value
    Type Description
    Layout

    MouseEnter

    Triggers when the mouse enters a node/connector.

    Declaration
    public EventCallback<DiagramElementMouseEventArgs> MouseEnter { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

    MouseHover

    Triggers when the mouse pointer rests on the node/connector.

    Declaration
    public EventCallback<DiagramElementMouseEventArgs> MouseHover { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

    MouseLeave

    Triggers when the mouse leaves a node/connector.

    Declaration
    public EventCallback<DiagramElementMouseEventArgs> MouseLeave { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramElementMouseEventArgs>

    NodeCreating

    Helps to assign the default properties of nodes.

    Declaration
    public EventCallback<IDiagramObject> NodeCreating { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<IDiagramObject>

    Nodes

    Defines a collection of node objects, used to visualize the geometrical information.

    Declaration
    public DiagramObjectCollection<Node> Nodes { get; set; }
    Property Value
    Type Description
    DiagramObjectCollection<Node>

    NodesChanged

    Specifies the callback to trigger when the node changes.

    Declaration
    public EventCallback<DiagramObjectCollection<Node>> NodesChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<DiagramObjectCollection<Node>>

    PageSettings

    Page settings enable you to customize the appearance, width, and height of the Diagram page.

    Declaration
    public PageSettings PageSettings { get; set; }
    Property Value
    Type Description
    PageSettings

    PositionChanged

    Triggers when the node's/connector's position is changed.

    Declaration
    public EventCallback<PositionChangedEventArgs> PositionChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PositionChangedEventArgs>

    PositionChanging

    Triggers while dragging the elements in the diagram.

    Declaration
    public EventCallback<PositionChangingEventArgs> PositionChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PositionChangingEventArgs>

    PropertyChanged

    Triggers when the node or connector property changes.

    Declaration
    public EventCallback<PropertyChangedEventArgs> PropertyChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<PropertyChangedEventArgs>

    RotationChanged

    Triggers when the diagram elements are rotated.

    Declaration
    public EventCallback<RotationChangedEventArgs> RotationChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<RotationChangedEventArgs>

    RotationChanging

    Triggers before the diagram elements are rotate.

    Declaration
    public EventCallback<RotationChangingEventArgs> RotationChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<RotationChangingEventArgs>

    ScrollChanged

    Triggers when the scrollbar is updated.

    Declaration
    public EventCallback<ScrollChangedEventArgs> ScrollChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<ScrollChangedEventArgs>

    ScrollSettings

    Defines the current zoom value, zoom factor, scroll status, and view port size of the diagram.

    Declaration
    public ScrollSettings ScrollSettings { get; set; }
    Property Value
    Type Description
    ScrollSettings

    SegmentCollectionChange

    Triggers when the connector’s segment collection is updated.

    Declaration
    public EventCallback<SegmentCollectionChangeEventArgs> SegmentCollectionChange { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SegmentCollectionChangeEventArgs>

    SelectionChanged

    Triggers when the selection is changed in the diagram.

    Declaration
    public EventCallback<SelectionChangedEventArgs> SelectionChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SelectionChangedEventArgs>

    SelectionChanging

    Triggers before the selection is change in the diagram.

    Declaration
    public EventCallback<SelectionChangingEventArgs> SelectionChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SelectionChangingEventArgs>

    SelectionSettings

    Defines the collection of selected items, the size and position of the selector.

    Declaration
    public DiagramSelectionSettings SelectionSettings { get; set; }
    Property Value
    Type Description
    DiagramSelectionSettings

    SetNodeTemplate

    Customizes the node template.

    Declaration
    public Func<IDiagramObject, CommonElement> SetNodeTemplate { get; set; }
    Property Value
    Type Description
    System.Func<IDiagramObject, CommonElement>

    SizeChanged

    Triggers when a node is resized.

    Declaration
    public EventCallback<SizeChangedEventArgs> SizeChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SizeChangedEventArgs>

    SizeChanging

    Triggers before a node is resize.

    Declaration
    public EventCallback<SizeChangingEventArgs> SizeChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<SizeChangingEventArgs>

    SnapSettings

    Defines the grid lines and specifies how and when objects must be snapped.

    Declaration
    public SnapSettings SnapSettings { get; set; }
    Property Value
    Type Description
    SnapSettings

    SourcePointChanged

    Triggers when the connector’s source point is changed.

    Declaration
    public EventCallback<EndPointChangedEventArgs> SourcePointChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs>

    SourcePointChanging

    Triggers while dragging the connector’s source end in the diagram.

    Declaration
    public EventCallback<EndPointChangingEventArgs> SourcePointChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs>

    TargetPointChanged

    Triggers when the connector’s target point is changed.

    Declaration
    public EventCallback<EndPointChangedEventArgs> TargetPointChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<EndPointChangedEventArgs>

    TargetPointChanging

    Triggers while dragging the connector’s target end in the diagram.

    Declaration
    public EventCallback<EndPointChangingEventArgs> TargetPointChanging { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<EndPointChangingEventArgs>

    TextChanged

    Triggers when the node’s/connector's label is changed in the diagram.

    Declaration
    public EventCallback<TextChangeEventArgs> TextChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<TextChangeEventArgs>

    Width

    Defines the width of the diagram.

    Declaration
    public string Width { get; set; }
    Property Value
    Type Description
    System.String

    WidthChanged

    Specifies the callback to trigger when the width changes.

    Declaration
    public EventCallback<string> WidthChanged { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.EventCallback<System.String>

    Methods

    AddChild(NodeGroup, NodeBase)

    This method is used for adding child to the selected group node.

    Declaration
    public Task AddChild(NodeGroup group, NodeBase child)
    Parameters
    Type Name Description
    NodeGroup group

    NodeGroup

    NodeBase child

    NodeBase

    Returns
    Type Description
    System.Threading.Tasks.Task

    AddDiagramElements(DiagramObjectCollection<NodeBase>)

    It is used for adding nodes collection to the diagram.

    Declaration
    public Task AddDiagramElements(DiagramObjectCollection<NodeBase> items)
    Parameters
    Type Name Description
    DiagramObjectCollection<NodeBase> items

    DiagramObjectCollection

    Returns
    Type Description
    System.Threading.Tasks.Task

    Task

    AddHistoryEntry(HistoryEntryBase)

    Declaration
    public void AddHistoryEntry(HistoryEntryBase entry)
    Parameters
    Type Name Description
    HistoryEntryBase entry

    BeginUpdate()

    This method locks the diagram to prevent its visual updates until the EndUpdate() method is called.

    Declaration
    public void BeginUpdate()

    BringForward()

    Visually moves the selected Node, Connector and Group over the nearest overlapping Node or connector or group.

    Declaration
    public void BringForward()
    Examples
     
    
    <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)

    Bring the specified bounds into center of the view port of the diagram.

    Declaration
    public void BringIntoCenter(DiagramRect bound)
    Parameters
    Type Name Description
    DiagramRect bound

    Specified size of the element that should also be brought into center of the viewport.

    Examples
    <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)

    Bring the specified bounds into the view port of the diagram.

    Declaration
    public void BringIntoView(DiagramRect bounds)
    Parameters
    Type Name Description
    DiagramRect bounds

    Specified size of the element that should also be brought into view.

    Examples
    <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 to the front over all other overlapped Nodes, Connectors and Groups.

    Declaration
    public void BringToFront()
    Examples
     
    
    <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()

    Clear all nodes, connectors and groups in the diagram

    Declaration
    public void Clear()

    ClearHistory()

    This method is used to clear the history.

    Declaration
    public void ClearHistory()

    ClearSelection()

    It allows the user to clear the selected nodes/connectors in the diagram.

    Declaration
    public void ClearSelection()

    Clone()

    This method helps to clone the diagram.

    Declaration
    public virtual object Clone()
    Returns
    Type Description
    System.Object

    Diagram

    Copy()

    It copies the selected nodes/connectors to the clipboard.

    Declaration
    public void Copy()

    Cut()

    It removes the selected nodes/connectors and moves them to the clipboard.

    Declaration
    public void Cut()

    DoLayout()

    It allows the user to refresh the layout at runtime.

    Declaration
    public Task DoLayout()
    Returns
    Type Description
    System.Threading.Tasks.Task

    Task

    Drag(IDiagramObject, Double, Double)

    It drags the given object by the specified pixels.

    Declaration
    public void Drag(IDiagramObject obj, double tx, double ty)
    Parameters
    Type Name Description
    IDiagramObject obj

    IDiagramObject

    System.Double tx

    double

    System.Double ty

    double

    EndGroupAction()

    It closes the grouping of actions that will be undone/restored as a whole.

    Declaration
    public void EndGroupAction()

    EndUpdate()

    This method unlocks the diagram after a call to the BeginUpdate(Boolean) method and causes an immediate visual update.

    Declaration
    public Task EndUpdate()
    Returns
    Type Description
    System.Threading.Tasks.Task

    Task

    ExportAsync(DiagramExportFormat, DiagramExportSettings)

    Exports the diagram to base64 string. Exported string can be returned.

    Declaration
    public Task<string[]> ExportAsync(DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)
    Parameters
    Type Name Description
    DiagramExportFormat fileFormat

    Specifies the export type for the rendered diagram.

    DiagramExportSettings exportSettings

    Specifies the configutation settings to export the diagram

    Returns
    Type Description
    System.Threading.Tasks.Task<System.String[]>

    The exported diagram as base64 string of the specified file type

    Examples
      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 diagram to various file types. It supports jpeg, png, svg ,bmp and pdf file types. Exported file will get download at client machine.

    Declaration
    public Task ExportAsync(string fileName, DiagramExportFormat fileFormat, DiagramExportSettings exportSettings)
    Parameters
    Type Name Description
    System.String fileName

    Specifies the filename without extension.

    DiagramExportFormat fileFormat

    Specifies the export type for the rendered diagram

    DiagramExportSettings exportSettings

    Specifies the configutation settings to export the diagram

    Returns
    Type Description
    System.Threading.Tasks.Task
    Remarks

    Diagram supports jepg, png and svg file types.

    Examples
      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, print);

    FitToPage(FitOptions)

    Fit the diagram pages based on FitOptions

    Declaration
    public void FitToPage(FitOptions options = null)
    Parameters
    Type Name Description
    FitOptions options

    Specifies the configuration settings to fit the diagram

    Examples
    <SfDiagramComponent Width="1000px" Height="1000px">
    </SfDiagramComponent>
    @code
    {
       SfDiagramComponent Diagram;
       FitOptions Options = new FitOptions(){
       Mode = FitMode.Both,
       Region = DiagramRegion.PageSetting,
    
       Diagram.FitToPage(Options);
    }

    GetObject(String)

    This method returns the object based on the given id.

    Declaration
    public IDiagramObject GetObject(string name)
    Parameters
    Type Name Description
    System.String name

    String

    Returns
    Type Description
    IDiagramObject

    IDiagramObject

    GetPageBounds(Nullable<Double>, Nullable<Double>)

    Represents a method used to get the bounds of the page.

    Declaration
    public DiagramRect GetPageBounds(Nullable<double> originX = null, Nullable<double> originY = null)
    Parameters
    Type Name Description
    System.Nullable<System.Double> originX
    System.Nullable<System.Double> originY
    Returns
    Type Description
    DiagramRect

    Group()

    Group the selected nodes and connectors in the diagram.

    Declaration
    public void Group()

    LoadDiagram(String)

    Converts the given string into a Diagram Control.

    Declaration
    public Task LoadDiagram(string data)
    Parameters
    Type Name Description
    System.String data

    string

    Returns
    Type Description
    System.Threading.Tasks.Task

    Diagram

    Nudge(Direction, Nullable<Int32>)

    Repositions the selected object by the specified delta in the given direction.

    Declaration
    public void Nudge(Direction direction, Nullable<int> nudgeDelta = null)
    Parameters
    Type Name Description
    Direction direction

    Nudge command moves the selected elements towards the specified Direction.

    System.Nullable<System.Int32> nudgeDelta

    The amount in delta by which to reposition the selected objects.

    Remarks

    The nudge commands move the selected elements towards up, down, left, or right by 1 pixel, by default.

    Examples
    private void Nudge()
     {
       //Repositions the selected objects by 50 towards down direction.
       diagram.Nudge(NudgeDirection.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
    SfBaseComponent.OnAfterRenderAsync(Boolean)

    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
    SfBaseComponent.OnInitializedAsync()

    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)

    Allows the user to update all the properties.

    Declaration
    public void OnPropertyChanged(string propertyName, object newVal, object oldVal, IDiagramObject parent)
    Parameters
    Type Name Description
    System.String propertyName

    string

    System.Object newVal

    object

    System.Object oldVal

    object

    IDiagramObject parent

    IDiagramObject

    Pan(Double, Double, DiagramPoint)

    It is used to pan the diagram control to the horizontal and vertical offsets.

    Declaration
    public void Pan(double horizontalOffset, double verticalOffset, DiagramPoint focusedPoint = null)
    Parameters
    Type Name Description
    System.Double horizontalOffset

    double

    System.Double verticalOffset

    double

    DiagramPoint focusedPoint

    Point

    Paste()

    Adds the given objects/ objects in the diagram clipboard to the diagram control.

    Declaration
    public void Paste()

    PrintAsync(DiagramPrintSettings)

    Prints the diagram pages based on DiagramPrintSettings.

    Declaration
    public Task PrintAsync(DiagramPrintSettings printSettings)
    Parameters
    Type Name Description
    DiagramPrintSettings printSettings

    Specifies the configuration settings to print the diagram.

    Returns
    Type Description
    System.Threading.Tasks.Task

    The System.Threading.Tasks.Task that completes when the diagram is sent to browser print preview window for printing.

    Examples
     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);

    Redo()

    It is used to restore the last undo action.

    Declaration
    public void Redo()

    RefreshDataSource()

    This method will refresh the layout based on the changes in the data source.

    Declaration
    public Task RefreshDataSource()
    Returns
    Type Description
    System.Threading.Tasks.Task

    RefreshDataSource

    RemoveChild(NodeGroup, NodeBase)

    It is used to remove the child from the selected group node.

    Declaration
    public void RemoveChild(NodeGroup group, NodeBase child)
    Parameters
    Type Name Description
    NodeGroup group

    NodeGroup

    NodeBase child

    NodeBase

    ResetZoom()

    Clears all the panning operations and removes all the panning relations of diagram control. Restores the panning position to origin of the diagram control by zoom level of One.

    Declaration
    public void ResetZoom()
    Examples
    <SfDiagramComponent @ref = "diagram" Width="600px" Height="600px" Nodes="nodes">
    <SnapSettings Constraints = "@SnapConstraints.ShowLines" ></ SnapSettings >
    </ SfDiagramComponent >
    @code{
       protected override void OnInitialized()
       {
           Node node = new Node()
           {
               ID = "node6",
               Width = 50,
               Height = 50,
               OffsetX = 150,
               OffsetY = 100,
           };
           Node node2 = new Node()
           {
               ID = "node7",
               Width = 50,
               Height = 50,
               OffsetX = 150,
               OffsetY = 170
          };
           nodes.Add(node);
           nodes.Add(node2);
       }
       public void ZoomIn()
       {
           diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 });
       }
       public void ZoomOut()
       {
           diagram.Zoom(1 / 1.2, new DiagramPoint { X = 100, Y = 100 });
       }
       private void ResetZoom()
       {
           diagram.ResetZoom();
       }
    }

    Rotate(IDiagramObject, Double, DiagramPoint)

    Rotates the given nodes/connectors at the given angle.

    Declaration
    public bool Rotate(IDiagramObject obj, double angle, DiagramPoint pivot = null)
    Parameters
    Type Name Description
    IDiagramObject obj

    IDiagramObject

    System.Double angle

    double

    DiagramPoint pivot

    Point

    Returns
    Type Description
    System.Boolean

    SaveDiagram()

    Serializes the diagram control as a string.

    Declaration
    public string SaveDiagram()
    Returns
    Type Description
    System.String

    jsonData

    Scale(IDiagramObject, Double, Double, DiagramPoint)

    Scales the given objects by the given ratio.

    Declaration
    public bool Scale(IDiagramObject obj, double sx, double sy, DiagramPoint pivot)
    Parameters
    Type Name Description
    IDiagramObject obj

    IDiagramObject

    System.Double sx

    double

    System.Double sy

    double

    DiagramPoint pivot

    Point

    Returns
    Type Description
    System.Boolean

    checkBoundaryConstraints

    Select(ObservableCollection<IDiagramObject>, Nullable<Boolean>)

    Selects the given collection of objects.

    Declaration
    public void Select(ObservableCollection<IDiagramObject> objects, Nullable<bool> multipleSelection)
    Parameters
    Type Name Description
    System.Collections.ObjectModel.ObservableCollection<IDiagramObject> objects

    ObservableCollection

    System.Nullable<System.Boolean> multipleSelection

    bool

    SelectAll()

    Select all the objects.

    Declaration
    public void SelectAll()

    SendBackward()

    Visually moves the selected Node, connector and group behind the underlying Node or Connector or Group.

    Declaration
    public void SendBackward()
    Examples
     
    
    <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 the other overlapped Nodes, Connectors and Group.

    Declaration
    public void SendToBack()
    Examples
     
    
    <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.

    Declaration
    public void SetAlign(AlignmentOptions alignmentOptions, DiagramObjectCollection<NodeBase> objects = null, AlignmentMode alignmentMode)
    Parameters
    Type Name Description
    AlignmentOptions alignmentOptions

    AlignmentOptions

    DiagramObjectCollection<NodeBase> objects

    DiagramObjectCollection

    AlignmentMode alignmentMode

    AlignmentMode

    SetDistribute(DistributeOptions, DiagramObjectCollection<NodeBase>)

    It arranges the group of nodes/connectors at equal intervals within the group of nodes/connectors.

    Declaration
    public void SetDistribute(DistributeOptions option, DiagramObjectCollection<NodeBase> objects = null)
    Parameters
    Type Name Description
    DistributeOptions option

    DistributeOptions

    DiagramObjectCollection<NodeBase> objects

    DiagramObjectCollection

    SetSameSize(SizingMode, DiagramObjectCollection<NodeBase>)

    Scales the given objects to the size of the first object in the group.

    Declaration
    public void SetSameSize(SizingMode sizingType, DiagramObjectCollection<NodeBase> objects = null)
    Parameters
    Type Name Description
    SizingMode sizingType

    SizingMode

    DiagramObjectCollection<NodeBase> objects

    DiagramObjectCollection

    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

    StartGroupAction()

    Starts the grouping of actions that will be undone/restored as a whole.

    Declaration
    public void StartGroupAction()

    StartTextEdit(IDiagramObject, String)

    Edits the annotation of the node/connector.

    Declaration
    public void StartTextEdit(IDiagramObject diagramObject, string id = null)
    Parameters
    Type Name Description
    IDiagramObject diagramObject

    IDiagramObject

    System.String id

    String

    Undo()

    Restores the last action that is performed.

    Declaration
    public void Undo()

    Ungroup()

    Ungroup the selected nodes and connectors in the diagram.

    Declaration
    public void Ungroup()

    UnSelect(IDiagramObject)

    Removes the given object from the selection list.

    Declaration
    public void UnSelect(IDiagramObject obj)
    Parameters
    Type Name Description
    IDiagramObject obj

    Zoom(Double, DiagramPoint)

    Allows the user to zoom in or zoom out.

    Declaration
    public void Zoom(double factor, DiagramPoint focusPoint)
    Parameters
    Type Name Description
    System.Double factor

    double

    DiagramPoint focusPoint

    Point

    Implements

    IDiagramObject
    System.ICloneable
    Back to top Generated by DocFX
    Copyright © 2001 - 2022 Syncfusion Inc. All Rights Reserved