From dd115ce1f20f47c18afb7e0d3102ddc86a0460cf Mon Sep 17 00:00:00 2001
From: Ramya <ramya.subramani@syncfusion.com>
Date: Wed, 15 Oct 2025 15:32:01 +0530
Subject: [PATCH] Updated code snippet for context menu

---
 .../Pages/Index.razor                         | 156 +++++++++++++++++-
 .../Pages/Index.razor                         | 131 ++++++++++++++-
 2 files changed, 272 insertions(+), 15 deletions(-)

diff --git a/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent/ContextMenuItemClickedEvent/Pages/Index.razor b/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent/ContextMenuItemClickedEvent/Pages/Index.razor
index cf01807c..ae0b8950 100644
--- a/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent/ContextMenuItemClickedEvent/Pages/Index.razor
+++ b/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuItemClickedEvent/ContextMenuItemClickedEvent/Pages/Index.razor
@@ -1,16 +1,156 @@
 @page "/"
+
 @using Syncfusion.Blazor.Diagram
 
-<SfDiagramComponent Height="600px">
-    <ContextMenuSettings Show="true" ShowCustomMenuOnly="false" ContextMenuItemClicked="@ContextMenuItemClickHandler">
+<SfDiagramComponent @ref="diagram"
+                    Height="600px"
+                    Nodes="NodeCollection"
+                    Connectors="ConnectorCollection">
+    <ContextMenuSettings Show="true"
+                         Items="contextMenuItemModels"
+                         ShowCustomMenuOnly="true"
+                         ContextMenuOpening="OnContextMenuOpen"
+                         ContextMenuItemClicked="ContextMenuItemClickHandler">
     </ContextMenuSettings>
 </SfDiagramComponent>
 
-@code
-{
-    // Defines context menu and ContextMenuItemClicked event
-    public void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg)
+@code {
+    // Reference to diagram
+    private SfDiagramComponent diagram;
+
+    // Diagram collections
+    private DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
+    private DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
+
+    protected override void OnInitialized()
+    {
+        // Nodes
+        Node node1 = new Node()
+        {
+            ID = "node1",
+            Height = 100,
+            Width = 100,
+            OffsetX = 100,
+            OffsetY = 100,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white",
+                StrokeWidth = 1
+            }
+        };
+
+        Node node2 = new Node()
+        {
+            ID = "node2",
+            Height = 100,
+            Width = 100,
+            OffsetX = 300,
+            OffsetY = 100,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white",
+                StrokeWidth = 1
+            }
+        };
+
+        NodeCollection.Add(node1);
+        NodeCollection.Add(node2);
+
+        // Connector
+        Connector connector1 = new Connector()
+        {
+            ID = "connector1",
+            SourceID = "node1",
+            TargetID = "node2",
+            Type = ConnectorSegmentType.Straight,
+            Style = new ShapeStyle()
+            {
+                StrokeWidth = 2
+            }
+        };
+
+        ConnectorCollection.Add(connector1);
+    }
+
+    // Context menu items
+    private List<ContextMenuItem> contextMenuItemModels = new List<ContextMenuItem>()
     {
-        //Action to be performed
+        new ContextMenuItem()
+        {
+            Text = "Node Color",
+            ID = "Node",
+            Items = new List<ContextMenuItem>()
+            {
+                new ContextMenuItem(){ Text = "Red",    ID = "Red"    },
+                new ContextMenuItem(){ Text = "Yellow", ID = "Yellow" }
+            }
+        },
+        new ContextMenuItem()
+        {
+            Text = "Connector Color",
+            ID = "Connector",
+            Items = new List<ContextMenuItem>()
+            {
+                new ContextMenuItem(){ Text = "Black", ID = "Black" },
+                new ContextMenuItem(){ Text = "Pink",  ID = "Pink"  }
+            }
+        }
+    };
+
+    private void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
+    {
+        if (diagram.SelectionSettings.Nodes.Count > 0)
+        {
+            Node node = diagram.SelectionSettings.Nodes[0];
+            if (node.ID == "node1" || node.ID == "node2")
+            {
+                foreach (ContextMenuItem item in arg.Items)
+                {
+                    if (item.ID == "Connector")
+                    {
+                        arg.HiddenItems.Add(item.ID); // Hide connector menu when a node is selected
+                    }
+                }
+            }
+        }
+
+        if (diagram.SelectionSettings.Connectors.Count > 0)
+        {
+            Connector connector = diagram.SelectionSettings.Connectors[0];
+            if (connector.ID == "connector1")
+            {
+                foreach (ContextMenuItem item in arg.Items)
+                {
+                    if (item.ID == "Node")
+                    {
+                        arg.HiddenItems.Add(item.ID); // Hide node menu when a connector is selected
+                    }
+                }
+            }
+        }
+    }
+
+    private void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg)
+    {
+        switch (arg.Item.Text)
+        {
+            case "Red":
+                diagram.SelectionSettings.Nodes[0].Style.Fill = "Red";
+                break;
+
+            case "Yellow":
+                diagram.SelectionSettings.Nodes[0].Style.Fill = "Yellow";
+                break;
+
+            case "Black":
+                diagram.SelectionSettings.Connectors[0].Style.StrokeColor = "Black";
+                break;
+
+            case "Pink":
+                diagram.SelectionSettings.Connectors[0].Style.StrokeColor = "Pink";
+                break;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent/ContextMenuOpenningEvent/Pages/Index.razor b/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent/ContextMenuOpenningEvent/Pages/Index.razor
index a089ae14..cbbd7cf5 100644
--- a/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent/ContextMenuOpenningEvent/Pages/Index.razor
+++ b/UG-Samples/ContextMenu/ContextMenuEvent/ContextMenuOpenningEvent/ContextMenuOpenningEvent/Pages/Index.razor
@@ -1,16 +1,133 @@
 @page "/"
+
 @using Syncfusion.Blazor.Diagram
 
-<SfDiagramComponent Height="600px">
-    <ContextMenuSettings Show="true" ShowCustomMenuOnly="false" ContextMenuOpening="@OnContextMenuOpen">
+<SfDiagramComponent @ref="diagram"
+                    Height="600px"
+                    Nodes="NodeCollection"
+                    Connectors="ConnectorCollection">
+    <ContextMenuSettings Show="true"
+                         Items="contextMenuItemModels"
+                         ShowCustomMenuOnly="true"
+                         ContextMenuOpening="OnContextMenuOpen">
     </ContextMenuSettings>
 </SfDiagramComponent>
 
-@code
-{
-    // Defines context menu and ContextMenuOpening event
-    public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
+@code {
+    // Reference to diagram
+    private SfDiagramComponent diagram;
+
+    // Diagram collections
+    private DiagramObjectCollection<Node> NodeCollection = new DiagramObjectCollection<Node>();
+    private DiagramObjectCollection<Connector> ConnectorCollection = new DiagramObjectCollection<Connector>();
+
+    protected override void OnInitialized()
     {
-        //Action to be performed
+        // Nodes
+        Node node1 = new Node()
+        {
+            ID = "node1",
+            Height = 100,
+            Width = 100,
+            OffsetX = 100,
+            OffsetY = 100,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white",
+                StrokeWidth = 1
+            }
+        };
+
+        Node node2 = new Node()
+        {
+            ID = "node2",
+            Height = 100,
+            Width = 100,
+            OffsetX = 300,
+            OffsetY = 100,
+            Style = new ShapeStyle()
+            {
+                Fill = "#6BA5D7",
+                StrokeColor = "white",
+                StrokeWidth = 1
+            }
+        };
+
+        NodeCollection.Add(node1);
+        NodeCollection.Add(node2);
+
+        // Connector
+        Connector connector1 = new Connector()
+        {
+            ID = "connector1",
+            SourceID = "node1",
+            TargetID = "node2",
+            Type = ConnectorSegmentType.Straight,
+            Style = new ShapeStyle()
+            {
+                StrokeWidth = 2
+            }
+        };
+
+        ConnectorCollection.Add(connector1);
+    }
+
+    // Context menu items
+    private List<ContextMenuItem> contextMenuItemModels = new List<ContextMenuItem>()
+    {
+        new ContextMenuItem()
+        {
+            Text = "Node Color",
+            ID = "Node",
+            Items = new List<ContextMenuItem>()
+            {
+                new ContextMenuItem(){ Text = "Red",    ID = "Red"    },
+                new ContextMenuItem(){ Text = "Yellow", ID = "Yellow" }
+            }
+        },
+        new ContextMenuItem()
+        {
+            Text = "Connector Color",
+            ID = "Connector",
+            Items = new List<ContextMenuItem>()
+            {
+                new ContextMenuItem(){ Text = "Black", ID = "Black" },
+                new ContextMenuItem(){ Text = "Pink",  ID = "Pink"  }
+            }
+        }
+    };
+
+    private void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
+    {
+        if (diagram.SelectionSettings.Nodes.Count > 0)
+        {
+            Node node = diagram.SelectionSettings.Nodes[0];
+            if (node.ID == "node1" || node.ID == "node2")
+            {
+                foreach (ContextMenuItem item in arg.Items)
+                {
+                    if (item.ID == "Connector")
+                    {
+                        arg.HiddenItems.Add(item.ID); // Hide connector menu when a node is selected
+                    }
+                }
+            }
+        }
+
+        if (diagram.SelectionSettings.Connectors.Count > 0)
+        {
+            Connector connector = diagram.SelectionSettings.Connectors[0];
+            if (connector.ID == "connector1")
+            {
+                foreach (ContextMenuItem item in arg.Items)
+                {
+                    if (item.ID == "Node")
+                    {
+                        arg.HiddenItems.Add(item.ID); // Hide node menu when a connector is selected
+                    }
+                }
+            }
+        }
     }
 }
\ No newline at end of file