Diagram Events in Blazor Diagram Component
30 Jun 202521 minutes to read
How to Use the Created Event
The Created event is triggered when the Diagram component is fully rendered and initialized. This event provides an opportunity to execute custom logic or perform specific actions immediately after the diagram is created. For instance, you can use this event to programmatically select objects, modify diagram properties, or initialize additional components that depend on the diagram’s existence.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
Created="OnCreated">
</SfDiagramComponent>
@code{
SfDiagramComponent Diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100
};
nodes.Add(node);
}
private void OnCreated(object args)
{
Diagram.Select(new ObservableCollection<IDiagramObject>() { Diagram.Nodes[0] });
}
}You can download a complete working sample from GitHub
How to Handle Click Events
The Click event is triggered when a user interacts with a node, connector, or the diagram canvas by clicking on it. This event provides valuable information about the clicked element and the click location. For detailed information about the event arguments, please refer to the ClickEventArgs.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
Click="OnClick">
</SfDiagramComponent>
@code{
SfDiagramComponent Diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100
};
nodes.Add(node);
}
private void OnClick(ClickEventArgs args)
{
}
}You can download a complete working sample from GitHub
How to Handle the Key Down Event
The KeyDown event is triggered when a user presses any key on the keyboard while the diagram component has focus. This event provides a powerful way to capture and respond to keyboard interactions. For detailed information about the event arguments and properties available, please refer to the KeyEventArgs.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
KeyDown="@OnKeyDown">
</SfDiagramComponent>
@code{
SfDiagramComponent Diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100
};
nodes.Add(node);
}
private void OnKeyDown(KeyEventArgs args)
{
}
}You can download a complete working sample from GitHub
How to Handle the Key Up Event
The KeyUp event is triggered when a user releases a key on the keyboard. This event provides valuable information about the released key and can be used to implement custom functionality or keyboard shortcuts in your Blazor diagram. For detailed information about the event arguments, refer to the KeyEventArgs, which outlines all the properties and methods available for handling this event effectively.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
KeyUp="@OnKeyUp">
</SfDiagramComponent>
@code{
SfDiagramComponent Diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
protected override void OnInitialized()
{
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100
};
nodes.Add(node);
}
private void OnKeyUp(KeyEventArgs args)
{
}
}You can download a complete working sample from GitHub
How to Handle the Drag Start Event
- The DragStart event is triggered when a user begins dragging a symbol from the symbol palette into the diagram canvas. This event provides valuable information about the drag operation initiation. For detailed information about the event arguments and properties available, refer to the DragStartEventArgs.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.SymbolPalette
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
DragStart="DragStart">
</SfDiagramComponent>
<SfSymbolPaletteComponent @ref="PaletteInstance" Height="600px" Palettes="@Palettes" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
SfDiagramComponent Diagram;
SfSymbolPaletteComponent PaletteInstance;
DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
{
SymbolInfo SymbolInfo = new SymbolInfo();
SymbolInfo.Fit = true;
return SymbolInfo;
}
protected override void OnInitialized()
{
TNodes = new DiagramObjectCollection<NodeBase>();
Node TNode2 = new Node()
{
ID = "node1",
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }
};
TNodes.Add(TNode2);
Palettes = new DiagramObjectCollection<Palette>()
{
new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
};
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
PaletteInstance.Targets = new DiagramObjectCollection<SfDiagramComponent>() { };
PaletteInstance.Targets.Add(Diagram);
}
//Notify the drag start event.
private void DragStart(DragStartEventArgs args)
{
//Action to be performed.
}
}You can download a complete working sample from GitHub
How to Handle the Dragging Event
- The Dragging event is triggered when a diagram element is being dragged over another element in the diagram. This event provides real-time feedback during the dragging process. To explore the available arguments and properties associated with this event, refer to the DraggingEventArgs.
@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Diagram.SymbolPalette
@using System.Collections.ObjectModel
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
Dragging="Dragging">
</SfDiagramComponent>
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
SfDiagramComponent Diagram;
DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
{
SymbolInfo SymbolInfo = new SymbolInfo();
SymbolInfo.Fit = true;
return SymbolInfo;
}
protected override void OnInitialized()
{
TNodes = new DiagramObjectCollection<NodeBase>();
Node TNode2 = new Node()
{
ID = "node1",
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }
};
TNodes.Add(TNode2);
Palettes = new DiagramObjectCollection<Palette>()
{
new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
};
}
// Notify the dragging event.
private void Dragging(DraggingEventArgs args)
{
//Action to be performed.
}
}You can download a complete working sample from GitHub
How to Handle the DragLeave Event
- The DragLeave event is triggered when a dragged element exits the boundaries of another diagram element. For detailed information about the event arguments, refer to the DragLeaveEventArgs documentation and sample code.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
@using Syncfusion.Blazor.Diagram.SymbolPalette
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
DragLeave="DragLeave">
</SfDiagramComponent>
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolDragPreviewSize="@SymbolPreview" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
SfDiagramComponent Diagram;
DiagramSize SymbolPreview;
DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
{
SymbolInfo SymbolInfo = new SymbolInfo();
SymbolInfo.Fit = true;
return SymbolInfo;
}
protected override void OnInitialized()
{
SymbolPreview = new DiagramSize();
SymbolPreview.Width = 80;
SymbolPreview.Height = 80;
TNodes = new DiagramObjectCollection<NodeBase>();
Node TNode2 = new Node()
{
ID = "node1",
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision}
};
TNodes.Add(TNode2);
Palettes = new DiagramObjectCollection<Palette>()
{
new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
};
}
// Notify the DragLeave event.
private void DragLeave(DragLeaveEventArgs args)
{
//Action to be performed.
}
}You can download a complete working sample from GitHub
How to Handle the Drag Drop Event
- The DragDrop event is triggered when a user drags a symbol from the symbol palette and drops it onto the diagram’s drawing area. This event provides valuable information about the drag and drop operation. To access and utilize the event arguments, refer to the DropEventArgs documentation, which details the properties and methods available for handling this event effectively.
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel
@using Syncfusion.Blazor.Diagram.SymbolPalette
<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Nodes="nodes"
DragDrop="DragDrop">
</SfDiagramComponent>
<SfSymbolPaletteComponent Height="600px" Palettes="@Palettes" SymbolDragPreviewSize="@SymbolPreview" SymbolHeight="40" GetSymbolInfo="GetSymbolInfo" SymbolWidth="40" >
</SfSymbolPaletteComponent >
@code{
SfDiagramComponent Diagram;
DiagramSize SymbolPreview;
DiagramObjectCollection<Palette> Palettes = new DiagramObjectCollection<Palette>();
DiagramObjectCollection<NodeBase> TNodes = new DiagramObjectCollection<NodeBase>();
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
private SymbolInfo GetSymbolInfo(IDiagramObject symbol)
{
SymbolInfo SymbolInfo = new SymbolInfo();
SymbolInfo.Fit = true;
return SymbolInfo;
}
protected override void OnInitialized()
{
SymbolPreview = new DiagramSize();
SymbolPreview.Width = 80;
SymbolPreview.Height = 80;
TNodes = new DiagramObjectCollection<NodeBase>();
Node TNode2 = new Node()
{
ID = "node1",
Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision }
};
TNodes.Add(TNode2);
Palettes = new DiagramObjectCollection<Palette>()
{
new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" },
};
}
// Notify the DragDrop event.
private void DragDrop(DropEventArgs args)
{
//Action to be performed.
}
}You can download a complete working sample from GitHub
How to Handle the On Auto Scroll Change Event
The OnAutoScrollChange event is triggered when changes are detected in the scroll position, extent, or viewport size due to auto-scrolling of diagram elements. This event provides an AutoScrollChangeEventArgs argument containing relevant information.
The AutoScrollChangeEventArgs include the following properties:
- Cancel: A boolean property that, when set to true, stops the auto-scrolling process.
- Item: Represents the diagram element currently undergoing auto-scrolling.
- Delay: A TimeSpan value that determines the waiting period between applying auto-scroll to a diagram element and initiating the actual auto-scrolling action.
These properties allow for fine-tuned control over the auto-scrolling behavior in your Blazor diagram component.
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="400px" Width="400px" Nodes="@nodes" Connectors="@connectors" OnAutoScrollChange="AutoScrollChange">
@* Sets the ScrollSettings for the diagram *@
<ScrollSettings EnableAutoScroll=true AutoScrollPadding="@autoScrollBorder" @bind-ScrollLimit="@ScrollLimit">
</ScrollSettings>
</SfDiagramComponent>
@code
{
ScrollLimitMode ScrollLimit { get; set; } = ScrollLimitMode.Infinity;
DiagramObjectCollection<Node> nodes;
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 };
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
// A node is created and stored in the nodes collection.
Node node = new Node()
{
ID = "node1",
// Position of the node.
OffsetX = 250,
OffsetY = 250,
// Size of the node.
Width = 100,
Height = 100,
Style = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "white"
}
};
// Add node.
nodes.Add(node);
Connector Connector = new Connector()
{
ID = "connector1",
// Set the source and target point of the connector.
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
TargetPoint = new DiagramPoint() { X = 100, Y = 200 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight,
Style = new ShapeStyle()
{
StrokeColor = "#6495ED",
StrokeWidth = 1
},
};
connectors.Add(Connector);
}
private void AutoScrollChange(AutoScrollChangeEventArgs args)
{
args.Cancel = false;
args.Delay = new TimeSpan(0, 0, 0, 1, 0);
}
}
You can download a complete working sample from GitHub