Layout Events in Diagram Component

3 Feb 20266 minutes to read

Data Loaded

• The DataLoaded event is raised when the diagram layout is rendered completely.

The following code example demonstrates handling the DataLoaded event in the diagram.

@using Syncfusion.Blazor.Diagram

<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>
    </Layout>
    <SnapSettings></SnapSettings>
</SfDiagramComponent>

@code
{
    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; }
        public string Role { get; set; }
        public string Manager { get; set; }
        public string ChartType { get; set; }
        public string Color { get; set; }
    }

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

    };

    private void NodeCreating(IDiagramObject obj)
    {
        Node node = obj as Node;
        if (node.Data is System.Text.Json.JsonElement)
        {
            node.Data = System.Text.Json.JsonSerializer.Deserialize<HierarchicalDetails>(node.Data.ToString());
        }
        HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails;
        node.Width = 150;
        node.Height = 50;
        node.Style.Fill = hierarchicalData.Color;
        // node.IsVisible = false;
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
            new ShapeAnnotation()
            {
                Content = hierarchicalData.Role,
                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.
    }
}

A complete working sample can be downloaded from GitHub