Class ContextMenuSettings

Represents the settings for a context menu (shortcut menu) in a diagram component.

Inheritance

System.Object

ContextMenuSettings

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class ContextMenuSettings : OwningComponentBase

Remarks

The ContextMenuSettings class enables customization of context menus in diagram components. Configure menu visibility, define custom items, and handle menu events through this component.

Examples

<SfDiagramComponent @ref="diagram" Height="600px" Width="90%" @bind-Nodes="nodes" >
<ContextMenuSettings @bind-Show="@show" @bind-ShowCustomMenuOnly="@customMenuOnly" @bind-Items="@Items" ContextMenuOpening="@BeforeOpen" ContextMenuItemClicked="@ItemClicked">
</ContextMenuSettings>
</SfDiagramComponent>
@code {
SfDiagramComponent diagram;
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();
ContextMenuSettings ContextMenuSettings;
List<ContextMenuItem> Items;
bool customMenuOnly = false;
bool show = true;
protected override void OnInitialized()
{

   Items = new List<ContextMenuItem>()
   {
            new ContextMenuItem()
           {
               Text = "Save As...",
               Id = "save",
               IconCss = "e-save",
           },
           new ContextMenuItem()
           {
               Text = "Group",
               Id = "load",
               IconCss = "e-group"
           }
   };
  Node node = new Node()
  {
    // Position of the node
    OffsetX = 250,
    OffsetY = 250,
    // Size of the node
    Width = 100,
    Height = 100,
      };
      nodes.Add(node);
}

Constructors

ContextMenuSettings()

Initializes a new instance of the ContextMenuSettings class with default values.

Declaration

public ContextMenuSettings()

Remarks

This constructor creates a new context menu settings instance with all properties set to their default values.

Properties

ChildContent

Gets or sets the child content of ContextMenuSettings.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment containing the nested context menu components. Default is null.

Remarks

This property allows for declarative composition of context menu elements using Razor syntax.

The child content is typically used to define the structure and appearance of context menu items, that will be displayed when the context menu is activated.

ContextMenuItemClicked

Gets or sets the callback to trigger while menu items gets clicked in the context menu

Declaration

public EventCallback<DiagramMenuClickEventArgs> ContextMenuItemClicked { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramMenuClickEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that gets invoked when a context menu item is clicked.

Remarks

Invoked when a context menu item is clicked, providing access to menu item details for handling different actions.

Examples

The following example demonstrates how to handle the Context Menu Item Clicked event.

<ContextMenuSettings Show="true" ContextMenuItemClicked="@ContextMenuItemClickHandler" >
</ContextMenuSettings>
@code {
public void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg)
{
   //Action to be performed
}
}

ContextMenuOpening

Gets or sets the callback to trigger before opening context menu

Declaration

public EventCallback<DiagramMenuOpeningEventArgs> ContextMenuOpening { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramMenuOpeningEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> that represents the method to be called when the context menu is about to open.

Remarks

Invoked before the context menu opens, allowing customization of menu items or cancellation based on current context.

Examples

The following example demonstrates how to handle the context menu opening event to customize menu items.

<ContextMenuSettings Show="true" ContextMenuOpening="@OnContextMenuOpen" >
</ContextMenuSettings>
@code {
public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg)
{
   //Action to be performed
}
}

ContextMenuTemplate

Gets or sets the template that defines the segment of the UI rendered for the context menu items.

Declaration

public RenderFragment<ContextMenuItem> ContextMenuTemplate { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment<ContextMenuItem>	A Microsoft.AspNetCore.Components.RenderFragment<> of type ContextMenuItem that represents the custom template for context menu items. The default value is null, which uses the default context menu item rendering.

Remarks

This template allows complete customization of the context menu item's appearance and behavior by providing a render fragment.

You can access the context menu item's properties through the @context parameter within the template.

Examples

This example demonstrates how to implement a basic context menu template with custom styling and keyboard shortcuts

<SfDiagramComponent>
<ContextMenuSettings>
<ContextMenuTemplate>
   @context.Text
   <span class="shortcut">@((@context.Text == "Save As...") ? "Ctrl + S" : "")</span>
</ContextMenuTemplate>
</ContextMenuSettings>
</SfDiagramComponent>

Items

Gets or sets the collection of ContextMenuItem objects that define the items displayed in the context menu.

Declaration

public List<ContextMenuItem> Items { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<ContextMenuItem>	A collection of ContextMenuItem objects or null.

Remarks

Defines the menu items displayed when the context menu is triggered. Each item represents a menu option with text, icon, and actions.

Examples

The following example demonstrates how to configure context menu items

<SfDiagramComponent>
<ContextMenuSettings  @bind-Items="@Items" >
</ContextMenuSettings>
</SfDiagramComponent>
@code {
protected override void OnInitialized()
{
Items = new List<ContextMenuItem>()
{
new ContextMenuItem()
{
Text = "Save As...",
Id = "save",
IconCss = "e-save",
},
};
}

ItemsChanged

Gets or sets the callback event which is invoked when Items value changes.

Declaration

public EventCallback<List<ContextMenuItem>> ItemsChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.List<ContextMenuItem>>

Remarks

This callback is used for two-way data binding to notify the parent component when the Items collection changes.

The event is triggered after the Items property has been updated with the current collection state.

Examples

This example demonstrates how to handle context menu item changes using the ItemsChanged callback.

<ContextMenuSettings Show="true" ItemsChanged="@OnItemsChanged" >
</ContextMenuSettings>
@code {
public void OnItemsChanged(List<ContextMenuItem> args)
{
   //Action to be performed
}
}

Show

Gets or sets a value indicating whether the context menu (shortcut menu) is displayed in the diagram component.

Declaration

public bool Show { get; set; }

Property Value

Type	Description
System.Boolean	true if the context menu can be enabled; otherwise, false.

Remarks

By default, the Show property is set to false which disables the context menu; set this property to true to enable the context menu functionality.

When enabled, the context menu will appear when users perform a right-click action on diagram elements, providing quick access to contextual commands and operations.

Examples

The following example demonstrates how to initialize the context menu in a Diagram component

<SfDiagramComponent>
<ContextMenuSettings @bind-Show="@show"  @bind-Items="@Items">
</ContextMenuSettings>
<SfDiagramComponent>
@code {
bool show = true;
protected override void OnInitialized()
{

   Items = new List<ContextMenuItem>()
   {
            new ContextMenuItem()
           {
               Text = "Save As...",
               Id = "save",
               IconCss = "e-save",
           },
   };
}

ShowChanged

Gets or sets the callback event which is invoked when Show value changes.

Declaration

public EventCallback<bool> ShowChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Boolean that represents the callback function. The default value is an empty callback.

Remarks

Used for two-way data binding to notify parent components of visibility changes.

The event is triggered after the Show property value has been updated.

Examples

<ContextMenuSettings Show="true" ShowChanged="@OnShowChanged" >
</ContextMenuSettings>
@code {
public void OnShowChanged(bool args)
{
   //Action to be performed
}

ShowCustomMenuOnly

Gets or sets a value indicating whether only the custom menu items are displayed in the context menu.

Declaration

public bool ShowCustomMenuOnly { get; set; }

Property Value

Type	Description
System.Boolean	A boolean value where true displays only custom menu items, and false displays both default and custom menu items.

Remarks

By default, ShowCustomMenuOnly is set to false. Set this property to true to display only custom menu items.

Examples

<ContextMenuSettings @bind-Show="@show" @bind-ShowCustomMenuOnly="@customMenuOnly" >
</ContextMenuSettings>
@code {
bool customMenuOnly = false;
bool show = true;
protected override void OnInitialized()
{

}

ShowCustomMenuOnlyChanged

Gets or sets the callback event which is invoked when ShowCustomMenuOnly value changes.

Declaration

public EventCallback<bool> ShowCustomMenuOnlyChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Boolean that executes when ShowCustomMenuOnly changes. The parameter is true for custom-only mode, false for all menu items.

Remarks

This callback is Useful for Updating UI state based on menu display mode. The event is triggered immediately when the ShowCustomMenuOnly property value changes .

Examples

This example demonstrates how to handle the ShowCustomMenuOnlyChanged event

<ContextMenuSettings Show="true" ShowCustomMenuOnlyChanged="@OnShowCustomMenuOnlyChanged" >
</ContextMenuSettings>
@code {
public void OnShowCustomMenuOnlyChanged(bool args)
{
   //Action to be performed
}
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose()

Releases all resources used by the ContextMenuSettings instance, disposing child items and clearing collections to prevent memory leaks.

Declaration

public void Dispose()

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering, otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Handles post-render operations including parent diagram state notifications when property updates occur. Resets the IsPropertyUpdate flag and calls the base render method with maintained synchronization context. Exceptions are logged before being re-thrown to preserve the exception chain.

OnInitializedAsync()

Initializes the context menu component when ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous initialization operation.

Remarks

Initializes base component, sets up menu items, generates context menu ID from parent, and registers with parent component. Exceptions are logged and re-thrown.

OnParametersSetAsync()

Method invoked when any changes in component state occur.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous parameter set operation.

Remarks

Detects parameter changes, updates internal state, and initializes parent settings.