Skip to content

1007315: Flowchart layout and Events #7514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
KarkuvelRajan merged 3 commits into from
Feb 3, 2026
Merged

1007315: Flowchart layout and Events #7514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d0084d
1007315: Flowchart
SriRam4552 Feb 2, 2026
a69d0a9
Merge branch 'hotfix/hotfix-v32.1.19' into 1007315-Flowchart
KarkuvelRajan Feb 3, 2026
b308e2c
1007315: EventsName
SriRam4552 Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 41 additions & 36 deletions blazor/diagram/layout/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Events in Syncfusion Blazor Diagram Component | Syncfusion
title: Layout Events in Syncfusion Blazor Diagram Component | Syncfusion
description: Checkout and learn here all about Layout Events in Syncfusion Blazor Diagram component and much more details.
platform: Blazor
control: Diagram Component
documentation: ug
---

# Events in Diagram Component
# Layout Events in Diagram Component

## Data Loaded

Expand All @@ -18,7 +18,7 @@ The following code example demonstrates handling the `DataLoaded` event in the d
```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="diagram" Width="100%" Height="600px" DataLoaded="@DataLoaded" NodeCreating="NodeCreating" ConnectorCreating="ConnectorCreating">
<SfDiagramComponent @ref="_diagram" Width="100%" Height="600px" DataLoaded="@DataLoaded" NodeCreating="NodeCreating" ConnectorCreating="ConnectorCreating">
<DataSourceSettings DataSource="DataSource" ID="Id" ParentID="Manager"></DataSourceSettings>
<Layout @bind-Type="type" @bind-HorizontalSpacing="@HorizontalSpacing" @bind-FixedNode="@FixedNode" @bind-Orientation="@oreintation" @bind-VerticalSpacing="@VerticalSpacing" @bind-HorizontalAlignment="@horizontalAlignment" @bind-VerticalAlignment="@verticalAlignment">
<LayoutMargin @bind-Top="@top" @bind-Bottom="@bottom" @bind-Right="@right" @bind-Left="@left"></LayoutMargin>
Expand All @@ -28,18 +28,19 @@ The following code example demonstrates handling the `DataLoaded` event in the d

@code
{
public SfDiagramComponent diagram;
double top = 50;
double bottom = 50;
double right = 50;
double left = 50;
LayoutType type = LayoutType.OrganizationalChart;
LayoutOrientation oreintation = LayoutOrientation.TopToBottom;
HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto;
VerticalAlignment verticalAlignment = VerticalAlignment.Auto;
int HorizontalSpacing = 30;
int VerticalSpacing = 30;
private SfDiagramComponent _diagram;
private double top = 50;
private double bottom = 50;
private double right = 50;
private double left = 50;
private LayoutType type = LayoutType.OrganizationalChart;
private LayoutOrientation oreintation = LayoutOrientation.TopToBottom;
private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto;
private VerticalAlignment verticalAlignment = VerticalAlignment.Auto;
private int HorizontalSpacing = 30;
private int VerticalSpacing = 30;
private string FixedNode = null;

public class HierarchicalDetails
{
public string Id { get; set; }
Expand All @@ -48,29 +49,31 @@ The following code example demonstrates handling the `DataLoaded` event in the d
public string ChartType { get; set; }
public string Color { get; set; }
}
public List<HierarchicalDetails> DataSource = new List<HierarchicalDetails>()

private List<HierarchicalDetails> DataSource = new List<HierarchicalDetails>()
{
new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" },
new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" },
new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" },
new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" },
new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" },
new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" },
new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" }
new HierarchicalDetails() { Id = "parent", Role = "Board", Color = "#71AF17" },
new HierarchicalDetails() { Id = "1", Role = "General Manager", Manager = "parent", ChartType = "right", Color = "#71AF17" },
new HierarchicalDetails() { Id = "11", Role = "Assistant Manager", Manager = "1", Color = "#71AF17" },
new HierarchicalDetails() { Id = "2", Role = "Human Resource Manager", Manager = "1", ChartType = "right", Color = "#1859B7" },
new HierarchicalDetails() { Id = "3", Role = "Trainers", Manager = "2", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "4", Role = "Recruiting Team", Manager = "2", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "5", Role = "Finance Asst. Manager", Manager = "2", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "6", Role = "Design Manager", Manager = "1", ChartType = "right", Color = "#1859B7" },
new HierarchicalDetails() { Id = "7", Role = "Design Supervisor", Manager = "6", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "8", Role = "Development Supervisor", Manager = "6", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "9", Role = "Drafting Supervisor", Manager = "6", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "10", Role = "Operation Manager", Manager = "1", ChartType = "right", Color = "#1859B7" },
new HierarchicalDetails() { Id = "11", Role = "Statistic Department", Manager = "10", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "12", Role = "Logistic Department", Manager = "10", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "16", Role = "Marketing Manager", Manager = "1", ChartType = "right", Color = "#1859B7" },
new HierarchicalDetails() { Id = "17", Role = "Oversea sales Manager", Manager = "16", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "18", Role = "Petroleum Manager", Manager = "16", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "20", Role = "Service Dept. Manager", Manager = "16", Color = "#2E95D8" },
new HierarchicalDetails() { Id = "21", Role = "Quality Department", Manager = "16", Color = "#2E95D8" }

};

private void NodeCreating(IDiagramObject obj)
{
Node node = obj as Node;
Expand All @@ -88,15 +91,17 @@ The following code example demonstrates handling the `DataLoaded` event in the d
new ShapeAnnotation()
{
Content = hierarchicalData.Role,
Style =new TextStyle(){Color = "white"}
Style = new TextStyle() { Color = "white" }
}
};
}

private void ConnectorCreating(IDiagramObject connector)
{
(connector as Connector).Type = ConnectorSegmentType.Orthogonal;
(connector as Connector).TargetDecorator.Shape = DecoratorShape.None;
}

private void DataLoaded(object args)
{
//Action to be performed.
Expand All @@ -105,4 +110,4 @@ The following code example demonstrates handling the `DataLoaded` event in the d
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBSstXHJJtrZCJc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/DataLoadedEvent)
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Layout/DataLoadedEvent.razor)
66 changes: 42 additions & 24 deletions blazor/diagram/layout/flowchart-layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,21 +44,21 @@ Different flowchart symbols have different meanings that are used to represent v
@code
{
//Initialize diagram component.
SfDiagramComponent Diagram;
private SfDiagramComponent _diagram;
//Initialize flowchart layout settings.
FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings()
private FlowchartLayoutSettings _flowchartSettings = new FlowchartLayoutSettings()
{
YesBranchDirection = BranchDirection.LeftInFlow,
NoBranchDirection = BranchDirection.RightInFlow
};

private void OnDataLoaded(object obj)
{
for (int i = 0; i < Diagram.Connectors.Count; i++)
for (int i = 0; i < _diagram.Connectors.Count; i++)
{
Connector connector = Diagram.Connectors[i];
Node node = Diagram.GetObject(connector.TargetID) as Node;
Node srcNode = Diagram.GetObject(connector.SourceID) as Node;
Connector connector = _diagram.Connectors[i];
Node node = _diagram.GetObject(connector.TargetID) as Node;
Node srcNode = _diagram.GetObject(connector.SourceID) as Node;
if (node.Data != null && node.Data is ItemInfo itemInfo)
{
if (itemInfo.Label != null && itemInfo.Label.Count > 0)
Expand All @@ -78,6 +78,7 @@ Different flowchart symbols have different meanings that are used to represent v
}
}
}

//Creates connectors with some default values.
private void OnConnectorCreating(IDiagramObject obj)
{
Expand All @@ -86,6 +87,7 @@ Different flowchart symbols have different meanings that are used to represent v
connector.Type = ConnectorSegmentType.Orthogonal;
}
}

//Creates nodes with some default values.
private void OnNodeCreating(IDiagramObject obj)
{
Expand All @@ -109,6 +111,7 @@ Different flowchart symbols have different meanings that are used to represent v
};
}
}

//Initialize data source collection.
public List<ItemInfo> DataSource = new List<ItemInfo>(){
new ItemInfo()
Expand Down Expand Up @@ -185,14 +188,15 @@ Different flowchart symbols have different meanings that are used to represent v
new ItemInfo()
{
Id = "8",
Name = "End",
ParentId = new List<string> { "6","7" },
_Shape = "Terminator",
_Width = 80,
_Height = 35,
_Color = "#6CA0DC"
Name = "End",
ParentId = new List<string> { "6", "7" },
_Shape = "Terminator",
_Width = 80,
_Height = 35,
_Color = "#6CA0DC"
},
};

public class ItemInfo
{
public string Name { get; set; }
Expand All @@ -210,7 +214,7 @@ Different flowchart symbols have different meanings that are used to represent v

{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVeWjNHTJDuhNZh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor flowchart layout rendered from data source](../images/Flowchart_Layout.png)" %}

A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/FlowchartLayout).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayout.razor).

## How to Customize Flowchart Layout Orientation

Expand All @@ -223,10 +227,15 @@ This orientation arranges elements vertically from top to bottom. It is commonly
```csharp
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram"Height="500px">
<SfDiagramComponent @ref="_diagram" Height="500px">
<Layout Type="LayoutType.Flowchart" Orientation="LayoutOrientation.TopToBottom">
</Layout>
</SfDiagramComponent>

@code
{
private SfDiagramComponent _diagram;
}
```
![Blazor flowchart layout with top-to-bottom orientation](../images/Flowchart_Layout.png)

Expand All @@ -237,10 +246,15 @@ This `Orientation` arranges elements horizontally from left to right. It is used
```csharp
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram"Height="500px">
<SfDiagramComponent @ref="_diagram" Height="500px">
<Layout Type="LayoutType.Flowchart" Orientation="LayoutOrientation.LeftToRight">
</Layout>
</SfDiagramComponent>

@code
{
private SfDiagramComponent _diagram;
}
```
![Blazor flowchart layout with left-to-right orientation](../images/Flowchart_LeftToRight.png)

Expand All @@ -266,7 +280,7 @@ The following table will explain the pictorial representation of the behavior:

>**Note:** If both branch directions are the same, the **Yes** branch is prioritized.

A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/FlowchartLayoutSettings).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Layout/FlowchartLayout/FlowchartLayoutSettingsSample.razor).

### How to Define Custom Yes and No Branch Values

Expand All @@ -286,21 +300,21 @@ Any text value can be given as a connector text to describe the flow. Also, any
@code
{
//Initialize diagram component.
SfDiagramComponent Diagram;
private SfDiagramComponent _diagram;
//Initialize flowchart layout settings.
FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings()
private FlowchartLayoutSettings _flowchartSettings = new FlowchartLayoutSettings()
{
YesBranchValues = new List<string> { "Accept", "Yes" },
NoBranchValues = new List<string> { "Reject", "No" },
};

private void OnDataLoaded(object obj)
{
for (int i = 0; i < Diagram.Connectors.Count; i++)
for (int i = 0; i < _diagram.Connectors.Count; i++)
{
Connector connector = Diagram.Connectors[i];
Node node = Diagram.GetObject(connector.TargetID) as Node;
Node srcNode = Diagram.GetObject(connector.SourceID) as Node;
Connector connector = _diagram.Connectors[i];
Node node = _diagram.GetObject(connector.TargetID) as Node;
Node srcNode = _diagram.GetObject(connector.SourceID) as Node;
if (node.Data != null && node.Data is ItemInfo itemInfo)
{
if (itemInfo.Label != null && itemInfo.Label.Count > 0)
Expand All @@ -320,6 +334,7 @@ Any text value can be given as a connector text to describe the flow. Also, any
}
}
}

//Creates connectors with some default values.
private void OnConnectorCreating(IDiagramObject obj)
{
Expand All @@ -328,6 +343,7 @@ Any text value can be given as a connector text to describe the flow. Also, any
connector.Type = ConnectorSegmentType.Orthogonal;
}
}

//Creates nodes with some default values.
private void OnNodeCreating(IDiagramObject obj)
{
Expand All @@ -351,6 +367,7 @@ Any text value can be given as a connector text to describe the flow. Also, any
};
}
}

//Initialize data source collection.
public List<ItemInfo> DataSource = new List<ItemInfo>(){
new ItemInfo()
Expand Down Expand Up @@ -398,13 +415,14 @@ Any text value can be given as a connector text to describe the flow. Also, any
{
Id = "5",
Name = "End",
ParentId = new List<string> { "4"},
ParentId = new List<string> { "4" },
_Shape = "Terminator",
_Width = 100,
_Height = 50,
_Color = "#6CA0DC"
},
};

public class ItemInfo
{
public string Name { get; set; }
Expand All @@ -418,7 +436,7 @@ Any text value can be given as a connector text to describe the flow. Also, any
}
}
```
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/CustomYesOrNoBranch).
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-UG-Examples/blob/master/Diagram/Server/Pages/Layout/FlowchartLayout/CustomYesOrNoBranch.razor).

{% previewsample "https://blazorplayground.syncfusion.com/embed/VDroWjZHzziHpvRD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor flowchart layout with custom Yes/No branch values](../images/Flowchart_CustomYesOrNoBranches.png)" %}

Expand Down