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	The default value will be Top

Remarks

The following options are used to define the direction of the bridge.

1. Left - Sets the direction of the bridge to Left.

2. Right - Sets the direction of bridge to Right.

3. Top - Sets the direction of bridge to Top.

4. Bottom - Sets the direction of bridge to Bottom.

Examples

<SfDiagramComponent Height="900px" BridgeDirection="Direction.Right" Connectors="@connectors">
</SfDiagramComponent>

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>

Examples

<SfDiagramComponent Width = "1000px" Height="1000px" Click="click">
</SfDiagramComponent>
@code
{
    private void click(ClickEventArgs args)
    {
        if (args.ActualObject != null)
        {
            Console.WriteLine("Clicked");
        }
    }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px" CollectionChanged="@collection">
</SfDiagramComponent>
@code
{
    private void collection(CollectionChangedEventArgs args)
    {
        if (args.Element != null)
        {
            Console.WriteLine("CollectionChanged");
        }
    }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px" CollectionChanging="@collection">
</SfDiagramComponent>
@code
{
    private void collection(CollectionChangingEventArgs args)
    {
        if (args.Element != null)
        {
            Console.WriteLine("CollectionChanging");
        }
    }
}

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

Examples

<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

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>

Examples

<SfDiagramComponent  ConnectionChanged="ConnectionChanged">
</SfDiagramComponent>
 private void ConnectionChanged(ConnectionChangedEventArgs args)
{
   args.Cancel = true;
}

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>

Examples

<SfDiagramComponent  ConnectionChanging="ConnectionChanging">
</SfDiagramComponent>
 private void ConnectionChanging(ConnectionChangingEventArgs args)
{
   args.Cancel = true;
}

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>

Examples

<SfDiagramComponent  ConnectorCreating="@ConnectorCreating">
</SfDiagramComponent>
@code
{
    private void ConnectorCreating(IDiagramObject obj)
    {

    }
}

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>

Examples

<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

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	The default value will be Default

Examples

<SfDiagramComponent @bind-Constraints="@diagramConstraints"  />
 @code
 {
   DiagramConstraints diagramConstraints = DiagramConstraints.Default;
}

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

Examples

<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 = "load",
               IconCss = "e-group"
           }
   };

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>

Examples

<SfDiagramComponent  DataLoaded="@DataLoaded">
</SfDiagramComponent>
@code
{
    private void DataLoaded(object args)
    {

    }
}

DataSourceSettings

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

Declaration

public DataSourceSettings DataSourceSettings { get; set; }

Property Value

Type	Description
DataSourceSettings

Examples

<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

Represents the template of the diagram element.

Declaration

public DiagramTemplates DiagramTemplates { get; set; }

Property Value

Type	Description
DiagramTemplates

Examples

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

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>

Examples

<SfDiagramComponent  DragDrop="DragDrop">
</SfDiagramComponent>
private void DragDrop(DropEventArgs args)
{
    if (args.Element is Node)
    {
        string id = (args.Element as NodeBase).ID;
    }
}

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

Examples

<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",
            //Size of the node
            Height = 100,
            Width = 100,
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
        };
        DrawingObject = node;
    }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px" FixedUserHandleClick="@fixedhandle">
</SfDiagramComponent>
public void fixedhandle(FixedUserHandleClickEventArgs args)
{

}

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>

Examples

<SfDiagramComponent  @bind-Nodes="Nodes" GetCustomCursor="@cursor" >
</SfDiagramComponent>
@code
{ 
  public string cursor(DiagramElementAction action, bool active, string handle)
  {

  }
}

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>

Examples

<SfDiagramComponent  @bind-Nodes="Nodes" GetCustomTool="@GetCustomTool">
</SfDiagramComponent>
@code
{ 
  public InteractionControllerBase GetCustomTool(DiagramElementAction action, string id)
  {

  }
}

Height

Defines the height of the diagram.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String

Examples

<SfDiagramComponent Height="900px">
</SfDiagramComponent>

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

Examples

<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;
    }
}

InteractionController

Defines the precedence of the interactive tools.

Declaration

public DiagramInteractions InteractionController { get; set; }

Property Value

Type	Description
DiagramInteractions	The default value will be Default

Examples

<SfDiagramComponent InteractionController="DiagramInteractions.SingleSelect"  />

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>

Examples

<SfDiagramComponent Width = "1000px" Height="1000px" KeyDown="@OnKeyDown">
</SfDiagramComponent>
@code
{
    private void OnKeyDown(KeyEventArgs args)
    {

    }
}

KeyUp

Triggers when a user releases a key.

Declaration

public EventCallback<KeyEventArgs> KeyUp { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<KeyEventArgs>

Examples

<SfDiagramComponent Width = "1000px" Height="1000px" KeyUp="@OnKeyUp">
</SfDiagramComponent>
@code
{
    private void OnKeyUp(KeyEventArgs args)
    {

    }
}

Layout

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

Declaration

public Layout Layout { get; set; }

Property Value

Type	Description
Layout

Examples

<SfDiagramComponent Height = "600px" >
    <DataSourceSettings ID = "Id" ParentID="Team" DataSource="@DataSource"></DataSourceSettings>   
    <Layout Type = "LayoutType.OrganizationalChart">
    </Layout>
</SfDiagramComponent>

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px"  MouseEnter="@MouseEnter">
</SfDiagramComponent>
@code
{
  private void MouseEnter(DiagramElementMouseEventArgs args)
  {
    if ((args != null) && (args.ActualObject != null))
    {
        Console.WriteLine("Mouse Entered");
    }
  }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px"  MouseHover="@MouseHover">
</SfDiagramComponent>
@code
{
  private void MouseHover(DiagramElementMouseEventArgs args)
  {
    if ((args != null) && (args.ActualObject != null))
    {
        Console.WriteLine("MouseHover");
    }
  }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px"  MouseLeave="@MouseLeave">
</SfDiagramComponent>
@code
{
  private void MouseLeave(DiagramElementMouseEventArgs args)
  {
    if ((args != null) && (args.ActualObject != null))
    {
        Console.WriteLine("MouseLeave");
    }
  }
}

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>

Examples

<SfDiagramComponent  NodeCreating="@NodeCreating">
</SfDiagramComponent>
@code
{
    private void NodeCreating(IDiagramObject obj)
    {

    }
}

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>

Examples

<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

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

Examples

<SfDiagramComponent @ref="diagram" Width="100%" Height="500px" Nodes="@nodes" Connectors="@connectors">
    <PageSettings Width = "80px" Height="300px" >
        <PageMargin Left = "10" Right="10" Top="10" Bottom="10"></PageMargin>
    </PageSettings>
</SfDiagramComponent>

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>

Examples

<SfDiagramComponent  PositionChanged="@changed">
</SfDiagramComponent>
private void changed(PositionChangedEventArgs args)
{
    if (args.NewValue != null && args.OldValue != null && args.Element != null)
    {
        Console.WriteLine("Changed");
    }
}

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>

Examples

<SfDiagramComponent  PositionChanging="@changed">
</SfDiagramComponent>
private void changed(PositionChangingEventArgs args)
{
    if (args.NewValue != null && args.OldValue != null && args.Element != null)
    {
        Console.WriteLine("Changing");
    }
}

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>

Examples

<SfDiagramComponent  RotationChanged="@RotationChanged">
</SfDiagramComponent>
@code
{
    private void RotationChanged(RotationChangedEventArgs args)
    {

    }
}

RotationChanging

Triggers before the diagram elements are rotate.

Declaration

public EventCallback<RotationChangingEventArgs> RotationChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<RotationChangingEventArgs>

Examples

<SfDiagramComponent RotationChanging="@RotationChanging">
</SfDiagramComponent>
@code
{
    private void RotationChanging(RotationChangingEventArgs args)
    {

    }
}

ScrollChanged

Triggers when the scrollbar is updated.

Declaration

public EventCallback<ScrollChangedEventArgs> ScrollChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ScrollChangedEventArgs>

Examples

<SfDiagramComponent Width = "1000px" Height="1000px" ScrollChanged="ScrollChanged">
</SfDiagramComponent>
@code
{
   private void ScrollChanged(ScrollChangedEventArgs args)
    {

    }
}

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

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings VerticalOffset="900px" HorizontalOffset="800px" >
    </ScrollSettings>
</SfDiagramComponent>

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>

Examples

<SfDiagramComponent Width = "1000px" Height="1000px" SegmentCollectionChange="@OnSegmentCollectionChange">
</SfDiagramComponent>
@code
{
     private void OnSegmentCollectionChange(SegmentCollectionChangeEventArgs args)
    {

    }
}

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

Examples

<SfDiagramComponent ref="@diagram" SelectionSettings="@select" Height="600px"  />
 @code
 {
        DiagramSelectionSettings select = new DiagramSelectionSettings() { Width =100, Height=150 };
    }
}

SelectionSettingsChanged

Specifies the callback to trigger when the selection settings changes.

Declaration

public EventCallback<DiagramSelectionSettings> SelectionSettingsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramSelectionSettings>

SetNodeTemplate

Customizes the node template.

Declaration

public Func<IDiagramObject, CommonElement> SetNodeTemplate { get; set; }

Property Value

Type	Description
System.Func<IDiagramObject, CommonElement>

Examples

<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

Triggers when a node is resized.

Declaration

public EventCallback<SizeChangedEventArgs> SizeChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SizeChangedEventArgs>

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

Triggers before a node is resize.

Declaration

public EventCallback<SizeChangingEventArgs> SizeChanging { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SizeChangingEventArgs>

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

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

Declaration

public SnapSettings SnapSettings { get; set; }

Property Value

Type	Description
SnapSettings

Examples

<SfDiagramComponent Height="500px">
    // Shows the horizontal grid lines
    <SnapSettings Constraints ="SnapConstraints.ShowLines" SnapAngle="10">
        <HorizontalGridLines LineColor = "blue" LineDashArray="2,2">
        </HorizontalGridLines>
        <VerticalGridLines LineColor = "blue" LineDashArray="2,2">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px" SourcePointChanged="@OnSourcePointChanged">
</SfDiagramComponent>
private void OnSourcePointChanged(EndPointChangedEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px" SourcePointChanging="@OnSourcePointChanging">
</SfDiagramComponent>
private void OnSourcePointChanging(EndPointChangingEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px" TargetPointChanged="@OnTargetPointChanged">
</SfDiagramComponent>
private void OnTargetPointChanged(EndPointChangedEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

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>

Examples

<SfDiagramComponent Width="1000px" Height="1000px" TargetPointChanging="@OnTargetPointChanging">
</SfDiagramComponent>
private void OnTargetPointChanging(EndPointChangingEventArgs args)
{
    if (args.Connector != null)
    {
        Connector connector = args.Connector;
    }
}

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>

Gets or set the value of tooltip that should be shown when the mouse hovers over a node or connector. For nodes and connectors, the diagram tooltip is enabled when the constraints values are set to "InheritTooltip".

Declaration

public DiagramTooltip Tooltip { get; set; }

Property Value

Type	Description
DiagramTooltip	The default value will be null

  

<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"} };  
    nodes.Add(node1);  
}  
}

Width

Defines the width of the diagram.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	The default value is 100%

Examples

<SfDiagramComponent Width="900px" Connectors="@connectors">
</SfDiagramComponent>

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	it contains group node
NodeBase	child	it contains node/connector

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	An DiagramObjectCollection that contain Node and connectors and group

Returns

Type	Description
System.Threading.Tasks.Task	Task

AddHistoryEntry(HistoryEntryBase)

Adds the given change in the diagram control to the track

Declaration

public void AddHistoryEntry(HistoryEntryBase entry)

Parameters

Type	Name	Description
HistoryEntryBase	entry	Defines the entry/information about a change in diagram

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

Examples

<SfDiagramComponent @ref="diagram">
</SfDiagramComponent>
@code
{
   SfDiagramComponent diagram;
    private void copy()
    {
     diagram.Copy(); 

    }
}

Cut()

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

Declaration

public void Cut()

Examples

<SfDiagramComponent @ref="diagram">
</SfDiagramComponent>
@code
{
   SfDiagramComponent diagram;
    private void Cut()
    {
     diagram.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	Defines the nodes/connectors to be dragged
System.Double	tx	Defines the distance by which the given objects have to be horizontally moved
System.Double	ty	Defines the distance by which the given objects have to be vertically moved

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	An string that contain id of node/connector.

Returns

Type	Description
IDiagramObject	It return 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	it store page bounds height value
System.Nullable<System.Double>	originY	it store page bounds width value

Returns

Type	Description
DiagramRect	It returns DiagramRect

Group()

Group the selected nodes and connectors in the diagram.

Declaration

public void Group()

HideTooltip(NodeBase)

The method is used to hide the tooltip in the tooltip open mode as in custom.

Declaration

public void HideTooltip(NodeBase node)

Parameters

Type	Name	Description
NodeBase	node

Examples

  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind-  Nodes="@nodes"></SfDiagramComponent>  
@code{  
SfDiagramComponent diagram;  
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
DiagramObjectCollection<Connector> nodes = 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 void HideTooltip()
{
   diagram.HideTooltip(diagram.nodes[1] as NodeBase);
}
}

LoadDiagram(String, Boolean)

Used to generate a SfDiagramComponent from the given json data.

Declaration

public Task LoadDiagram(string data, bool isClassicData = false)

Parameters

Type	Name	Description
System.String	data	Json data of the SfDiagramComponent or SfDiagram.
System.Boolean	isClassicData	true if the json data is SfDiagram; otherwise, false.

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 that contains the propertyname.
System.Object	newVal	An object that contain newvalue, which means new value of property
System.Object	oldVal	An object that contain oldvalue, which means old value of property
IDiagramObject	parent	An IDiagramObject that contain 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	Defines the horizontal distance to which the diagram has to be scrolled
System.Double	verticalOffset	Defines the vertical distance to which the diagram has to be scrolled
DiagramPoint	focusedPoint	Provide the focusedPoint value

Paste()

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

Declaration

public void Paste()

Examples

<SfDiagramComponent @ref="diagram">
</SfDiagramComponent>
@code
{
   SfDiagramComponent diagram;
    private void Paste()
    {
     diagram.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	It contains group node
NodeBase	child	It contains node/connector

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	Defines the objects to be rotated
System.Double	angle	Defines the angle by which the objects have to be rotated
DiagramPoint	pivot	Defines the reference point with reference to which the objects have to be rotated

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	Defines the objects to be resized
System.Double	sx	Defines the ratio by which the objects have to be horizontally scaled
System.Double	sy	efines the ratio by which the objects have to be vertically scaled
DiagramPoint	pivot	Defines the reference point with respect to which the objects will be resized

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	Defines the collection of nodes and connectors to be selected
System.Nullable<System.Boolean>	multipleSelection	Defines whether the existing selection has to be cleared or not

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	It define alignment options.
DiagramObjectCollection<NodeBase>	objects	It defines nodes,connector collection
AlignmentMode	alignmentMode	It define alignment mode.

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	It defines distribution options
DiagramObjectCollection<NodeBase>	objects	It defines nodes,connector collection

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	It defines sizing mode
DiagramObjectCollection<NodeBase>	objects	It defines nodes,connector collection

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

ShowTooltip(NodeBase)

The method is used to show the tooltip in the tooltip open mode as in custom.

Declaration

public void ShowTooltip(NodeBase node)

Parameters

Type	Name	Description
NodeBase	node

Examples

  

<SfDiagramComponent @ref="diagram” Width="1000px" Height="500px" @bind-  Nodes="@nodes"></SfDiagramComponent>  
@code{  
SfDiagramComponent diagram;  
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();  
DiagramObjectCollection<Connector> nodes = 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 void ShowTooltip()
{
   diagram.ShowTooltip(diagram.nodes[1] as NodeBase);
}
}

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	Defines node/connector that contains the annotation to be edited
System.String	id	Defines annotation id to be edited in the node

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	Removes the given object from selection list

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	Defines the factor by which the diagram is zoomed
DiagramPoint	focusPoint	Defines the point with respect to which the diagram has to be zoomed

Implements

IDiagramObject

System.ICloneable

Blazor- v20.3.0.56

Class SfDiagramComponent

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

Constructors

SfDiagramComponent()

Declaration

Properties

BridgeDirection

Declaration

Property Value

Remarks

Examples

BridgeDirectionChanged

Declaration

Property Value

ChildContent

Declaration

Property Value

Click

Declaration

Property Value

Examples

CollectionChanged

Declaration

Property Value

Examples

CollectionChanging

Declaration

Property Value

Examples

CommandManager

Declaration

Property Value

Examples

ConnectionChanged

Declaration

Property Value

Examples

ConnectionChanging

Declaration

Property Value

Examples

ConnectorCreating

Declaration

Property Value

Examples

Connectors

Declaration

Property Value

Examples

ConnectorsChanged

Declaration

Property Value

Constraints

Declaration

Property Value

Examples

ConstraintsChanged

Declaration

Property Value

ContextMenuSettings

Declaration

Property Value

Examples

Created

Declaration

Property Value

Remarks

Examples

DataLoaded

Declaration

Property Value

Examples

DataSourceSettings

Declaration