We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Show context menu with left mouse button

Show context menu with left mouse button

Is there anyway to change the show behavior with a left click instead right? I have many context menu's on a page and can set the target and menu items dynamically, but cannot seem to set the @ref dynamically to call the .open method.  Everything works great with having multiple menu's, except the fact you have to right click.

Any help would be appreciated.

Thank You!

6 Replies
SD Saranya Dhayalan Syncfusion Team May 13, 2020 05:45 AM UTC

Hi Michael, 
 
Thank you for contacting Syncfusion support 
 
Query: Is there anyway to change the show behavior with a left click instead right?  
 
We have checked your reported query you can achieve this by using Open method of contextmenu in the click event of target element and you can prevent opening on right click in OnOpen event. Please find the below code snippet: 
 
@using Syncfusion.Blazor.Navigations; 
 
<div id="target" @onclick="click">Right click/Touch hold to open the ContextMenu </div> 
<SfContextMenu @ref="ContextMenuObj" Target="#target" Items="@MenuItems"> 
    <ContextMenuEvents OnOpen="OnOpen" Opened="Opened"></ContextMenuEvents> 
</SfContextMenu> 
 
 
@code { 
    SfContextMenu ContextMenuObj; 
    public bool isLeftClick = false; 
 
    private void click(MouseEventArgs args) 
    { 
        this.isLeftClick = true; 
        ContextMenuObj.Open(args.ClientY, args.ClientX); 
    } 
 
    public List<MenuItem> MenuItems = new List<MenuItem> 
{ 
        new MenuItem{ Text = "Cut" }, 
        new MenuItem{ Text = "Copy" }, 
        new MenuItem{ Text = "Paste" } 
    }; 
 
    public void OnOpen(BeforeOpenCloseMenuEventArgs args) 
    { 
         
        if (!this.isLeftClick) 
        { 
            args.Cancel = true; 
        } 
    } 
 
    public void Opened(OpenCloseMenuEventArgs args) 
    { 
        this.isLeftClick = false; 
    } 
} 
 
 
<style> 
 
    #target { 
        border: 1px dashed; 
        height: 150px; 
        padding: 10px; 
        position: relative; 
        text-align: justify; 
        color: gray; 
        user-select: none; 
    } 
</style> 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Saranya D 


MC Michael Constantine May 13, 2020 01:25 PM UTC

The problem is this:
@ref="ContextMenuObj"

@code { 
    SfContextMenu ContextMenuObj; 


I am dynamically creating potentially 30 divs on the page all containing one SfContextMenu.  So creating a single reference does not work in this instance.


SD Saranya Dhayalan Syncfusion Team May 19, 2020 03:25 PM UTC

Hi Michael, 
 
Thank you for contacting Syncfusion support 
 
We have checked your reported query, we would like to let you know that currently this support is not available in our context menu.  However, we have considered this as a feature, and it will be available in our Essential studio 2020 Volume 2 release. You can track the status in the below feedback link. 
 
 
 
Regards, 
Saranya D 


SD Saranya Dhayalan Syncfusion Team May 20, 2020 07:40 AM UTC

Hi Michael, 
 
Query: I am dynamically creating potentially 30 divs on the page all containing one SfContextMenu.  So creating a single reference does not work in this instance. 
 
We have prepared a workaround solution for your reported issue. We have added the each context menu reference in a list and based on the 'target' element click, we have used the respective context menu reference to open it. Please find the below code snippet: 
 
@using Syncfusion.Blazor.Navigations 
 
@for (int i = 0; i < 2; i++) 
{ 
    string target = "target" + @i; 
    string targetID = "#" + target; 
    <div id=@target @onclick="@((MouseEventArgs e)=>click(e, target))">Right click/Touch hold to open the ContextMenu </div> 
    <SfContextMenu @ref="component" Target=@targetID Items="@MenuItems"> 
        <ContextMenuEvents OnOpen="OnOpen" Opened="Opened"></ContextMenuEvents> 
    </SfContextMenu> 
} 
 
 
@code 
    { 
 
    SfContextMenu component { set => components.Add(value); } 
 
 
    List<SfContextMenu> components = new List<SfContextMenu>(); 
 
    SfContextMenu ContextMenuObj; 
    public bool isLeftClick = false; 
 
    private void click(MouseEventArgs args, string target) 
    { 
        this.isLeftClick = true; 
        int cmObj = Convert.ToInt32(target.Substring(target.Length - 1)); 
        components[cmObj].Open(args.ClientY, args.ClientX); 
    } 
 
    public List<MenuItem> MenuItems = new List<MenuItem> 
{ 
        new MenuItem{ Text = "Cut" }, 
        new MenuItem{ Text = "Copy" }, 
        new MenuItem{ Text = "Paste" } 
    }; 
 
    public void OnOpen(BeforeOpenCloseMenuEventArgs args) 
    { 
 
        if (!this.isLeftClick) 
        { 
            args.Cancel = true; 
        } 
    } 
 
    public void Opened(OpenCloseMenuEventArgs args) 
    { 
        this.isLeftClick = false; 
    } 
} 
 
<style> 
 
    #target0, #target1 { 
        border: 1px dashed; 
        height: 150px; 
        padding: 10px; 
        position: relative; 
        text-align: justify; 
        color: gray; 
        user-select: none; 
    } 
</style> 
 
Please check the above code snippet and get back to us if you need further assistance on this. 
 
Regards, 
Saranya D 


MC Michael Constantine June 8, 2020 09:36 PM UTC

Thanks!  This works, but the context menu doesn't pop to the correct location on screen if the items are spread out on the page and scrolling is required.

AS Aravinthan Seetharaman Syncfusion Team March 10, 2021 10:01 AM UTC

Hi Michael, 
 
We have checked your query. We have validated the issue with scrolling, and we cannot reproduce your reported issue in our end. For your reference we have prepared code snippet and sample here. 
 
Index.razor 
 
@using Syncfusion.Blazor.Navigations 
 
    <div id="target">Right click/Touch hold to open the ContextMenu </div> 
    <SfContextMenu Target="#target" TValue="MenuItem"> 
        <MenuItems> 
            <MenuItem Text="Cut"></MenuItem> 
            <MenuItem Text="Copy"></MenuItem> 
            <MenuItem Text="Paste"></MenuItem> 
        </MenuItems> 
    </SfContextMenu> 
<div style="height:1000px"></div> 
 
    <style> 
        #target { 
            border: 1px dashed; 
            height: 150px; 
            padding: 10px; 
            position: relative; 
            text-align: justify; 
            color: gray; 
            user-select: none; 
        } 
    </style> 
 
  
 
Could you please check the above details, and get back to us with more information, if you need assistance on this. 
 
Regards, 
Aravinthan S 


Loader.
Up arrow icon