How to Find the Expand and Collapse State of a Node During Initial Load and Runtime in a Diagram?

In Syncfusion® Blazor Diagram, you can track the expand and collapse state of a node by setting the initial state of the IsExpanded property and using the PropertyChanged event to monitor changes at runtime.

Steps:
Set Initial State:

• You can define the initial expand/collapse state of each node using the IsExpanded property in the OnInitialized method to specify whether the node is initially expanded or collapsed.

Monitor Changes at Runtime:

• To detect changes in the expand/collapse state at runtime, use the PropertyChanged event, which is triggered whenever a node’s property, including its expand/collapse state, is modified.

Example Code:

@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes" Connectors="@connectors" PropertyChanged="PropertyChanged" />

@code
{
   DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
   DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
   private void PropertyChanged(PropertyChangedEventArgs args)
   {
      
   }
   protected override void OnInitialized()
   {
       Node node1 = new Node()
           {
               ID = "node1",
               Width = 100,
               Height = 100,
               OffsetX = 300,
               OffsetY = 300,
               Style = new ShapeStyle()
               {
                   Fill = "#6BA5D7",
                   StrokeColor = "white"
               },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
           {
               new ShapeAnnotation()
               {
                   Content="Node1"
               }
           },
               ExpandIcon = new DiagramExpandIcon()
               {
                   Shape = DiagramExpandIcons.Minus,
                   Height = 20,
                   Width = 20,
               },
               CollapseIcon = new DiagramCollapseIcon()
               {
                   Shape = DiagramCollapseIcons.Plus,
                   Height = 20,
                   Width = 20,
               },
           };
       nodes.Add(node1);
       Node node2 = new Node()
           {
               ID = "node2",
               Width = 100,
               Height = 100,
               OffsetX = 300,
               OffsetY = 500,
               Style = new ShapeStyle()
               {
                   Fill = "#6BA5D7",
                   StrokeColor = "white"
               },
               Annotations = new DiagramObjectCollection<ShapeAnnotation>()
           {
               new ShapeAnnotation()
               {
                   Content="Node2"
               }
           },
               ExpandIcon = new DiagramExpandIcon()
               {
                   Shape = DiagramExpandIcons.Minus,
                   Height = 20,
                   Width = 20,
               },
               CollapseIcon = new DiagramCollapseIcon()
               {
                   Shape = DiagramCollapseIcons.Plus,
                   Height = 20,
                   Width = 20,
               },
           };
       nodes.Add(node2);
       Connector connector1 = new Connector()
           {
               ID = "connector1",
               SourceID = "node1",
               TargetID = "node2",
           };
       connectors.Add(connector1);
   }
} 

Key Points:

• The IsExpanded property is set to either true (expanded) or false (collapsed) for each node during initialization. This controls the state of the nodes when the diagram is first rendered.
• The PropertyChanged event is used to monitor changes to the IsExpanded property. If the expand/collapse state of a node changes, the event is triggered.

For more information, refer to:

• Node Expansion/Collapse Documentation
• PropertyChanged Event Documentation.

You can download a complete working sample here.

Conclusion:

This Blazor application demonstrates how to track and save the expand/collapse state of a nodes in Syncfusion® Blazor Diagram.

You can refer to our Blazor Diagram feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Diagram example to understand how to create and manipulate diagram nodes.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Diagram and other Blazor components.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!