1. Home
  2. Forum
  3. Blazor
  4. Dynamic context menu items

Dynamic context menu items

Hi, 

Does anyone have an example of how to dynamically add/remove contextmenu items on open.  Basically each time the context menu is opened I need different menu items to display depending on the context.  There are a different number of dynamic items depending on the context (sometimes 2, sometimes 100, etc...), so enabling/disabling does not work for my scenario.

I have tried adding new MenuItem instances to the bound collection in the OnOpen event, but it doesn't work.

Thanks, John

7 Replies
SD Saranya Dhayalan Syncfusion Team March 17, 2020 10:43 AM UTC

Hi John, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported query, in context menu you have the requirement to have different menu items to display depending on the context, which we can be achieved this in OnOpen event. Currently, we couldn’t get the target within OnOpen event. We will provide to get the target in OnOpen event in our Essential studio 2020 volume-1 Sp-1 release.  
 
However, we will provide to change the target and menuItems by using the property binding in the button click event. Please find the below code snippet: 
 
@using Syncfusion.EJ2.Blazor.Navigations 
 
@using Syncfusion.EJ2.Blazor.Buttons 
 
<div class="control-section"> 
    <div class="contextmenu-control"> 
        <div id="contextmenutarget">Right click/Touch hold to open the ContextMenu</div> 
        <EjsContextMenu @ref="cmObj" Target="@target" Items="@MenuItems"></EjsContextMenu> 
    </div> 
</div> 
 
<div id="contextmenutarget1">ContextMenu</div> 
 
<EjsButton CssClass="e-flat" Content="onTargetChange" @onclick="onTargetChange"></EjsButton> 
 
 
@code{ 
 
    public string target = "#contextmenutarget"; 
 
    EjsContextMenu cmObj; 
 
    public List<MenuItem> MenuItems = new List<MenuItem> 
{ 
    new MenuItem { Text="Cut" }, 
    new MenuItem { Text="Copy" }, 
    new MenuItem { Text ="Paste"}, 
    new MenuItem { Separator= true}, 
    new MenuItem { Text = "Link"}, 
    new MenuItem { Text = "New Comment"} 
    }; 
 
public void onTargetChange() 
    { 
        target = "#contextmenutarget1"; // to change the target in the button click 
        MenuItems = new List<MenuItem> 
        { 
            new MenuItem { Text="Insert" }, 
            new MenuItem { Text="Delete" }, 
            new MenuItem { Text ="Cut"}, 
 
        }; 
    } 
 } 
 
For your convenience we have prepared a sample. Please find the below sample link 
 
 
Could you please check and get back to us if you need further assistance on this? 
 
Regards, 
Saranya D 


JO John March 18, 2020 08:51 PM UTC

Thank you for the response.  

In our use case, the target is not a single DOM element, but is based on a number of currently selected svg elements.

We would like to dynamically generate menu items on open to simplify the logic, which depends on which svg elements are currently selected.  

This is quite common in many UI frameworks to avoid state based bugs.  

The solution you proposed would require us to track all changes, and update the menuItems  which is error prone.   

Please advise, thanks John





SD Saranya Dhayalan Syncfusion Team March 19, 2020 12:14 PM UTC

Hi John, 
 
Most welcome. 
 
We have checked your requirement, you can achieve this by setting common selector (ex. common class name) to target property of context menu and in OnOpen event you can change menu items based on your svg element but currently we do not have the support to provide the target on which the context menu is opening in OnOpent event. We will provide to get the target in OnOpen event in our Essential studio 2020 volume-1 Sp-1 release.  Please find the below code snippet: 
 
<div class="control-section"> 
    <div class="contextmenu-control"> 
        <div id="contextmenutarget" class="customClass">Right click/Touch hold to open the ContextMenu</div> 
        <EjsContextMenu  @ref="cmObj" Target="@target" Items="@MenuItems"> 
            <ContextMenuEvents OnOpen="onOpen"></ContextMenuEvents> 
        </EjsContextMenu> 
    </div> 
</div> 
 
<div id="contextmenutarget1" class="customClass">ContextMenu</div> 
 
 
@code{ 
 
    public string target = ".customClass"; 
 
    EjsContextMenu cmObj; 
 
    public List<MenuItem> MenuItems = new List<MenuItem> 
{ 
    new MenuItem { Text="Cut" }, 
    new MenuItem { Text="Copy" }, 
    new MenuItem { Text ="Paste"}, 
    new MenuItem { Separator= true}, 
    new MenuItem { Text = "Link"}, 
    new MenuItem { Text = "New Comment"} 
    }; 
 
 
    public async void onOpen(BeforeOpenCloseMenuEventArgs args) 
    { 
        
        //your code 
    } 
 
} 
 
 
If you want to inset the items before the specified menu item text, please use the insertBefore method.  
Please get back to us if you need further assistance on this. 
 
Regards, 
Saranya D 


CO Constantine November 29, 2020 08:15 AM UTC

Hi. Dynamic creation of menu items is still not implemented?

MK Mohan Kumar Ramasamy Syncfusion Team November 30, 2020 01:32 PM UTC

Hi Constantine, 
 
We have checked your reported query. We can achieve your requirement using Add. Please refer below code snippets. 
 
 
@using Syncfusion.Blazor.Navigations 
@using Syncfusion.Blazor.Buttons 
 
<div class="control-section"> 
    <div class="contextmenu-control"> 
        <div id="contextmenutarget">Right click/Touch hold to open the ContextMenu</div> 
        <SfContextMenu @ref="ContextMenuObj" Target="#contextmenutarget" Items="@MenuItems"></SfContextMenu> 
        <br /> <br /> 
        <SfButton Content="Update" @onclick="UpdateItem"></SfButton> 
    </div> 
</div> 
 
@code{ 
 
    SfContextMenu<MenuItemModel> ContextMenuObj; 
 
    private void UpdateItem() 
    { 
        MenuItems.Add(new MenuItemModel { Text = "Dynamic Item" }); 
    } 
 
    public List<MenuItemModel> MenuItems = new List<MenuItemModel> 
{ 
        new MenuItemModel { Text="Cut", IconCss="e-cm-icons e-cut" }, 
        new MenuItemModel { Text="Copy", IconCss="e-cm-icons e-copy" }, 
        new MenuItemModel { Text ="Paste", IconCss="e-cm-icons e-paste", 
            Items = new List<MenuItemModel> 
        { 
                new MenuItemModel { Text = "Paste Text", IconCss = "e-cm-icons e-pastetext" }, 
                new MenuItemModel { Text = "Paste Special", IconCss = "e-cm-icons e-pastespecial" } 
            } 
        }, 
        new MenuItemModel { Separator= true}, 
        new MenuItemModel { Text = "Link", IconCss = "e-cm-icons e-link"}, 
        new MenuItemModel { Text = "New Comment", IconCss = "e-cm-icons e-comment"} 
    }; 
 
} 
 
 
For your reference, we have prepared a sample based on this. Please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


CO Constantine November 30, 2020 02:16 PM UTC

Okay. Thank you.

AS Aravinthan Seetharaman Syncfusion Team December 1, 2020 10:48 AM UTC

Hi Constantine, 
  
Thanks for the update.  
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this.  
  
Regards,  
Aravinthan S 


Loader.
Up arrow icon