Show context menu with left mouse button

[Michael Constantine]

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!

[Saranya Dhayalan]

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 

[Michael Constantine]

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.

[Saranya Dhayalan]

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. 

 

https://www.syncfusion.com/feedback/14508/to-provide-the-context-menu-with-left-mouse-button-support 

 

 

Regards, 

Saranya D 

[Saranya Dhayalan]

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 

[Michael Constantine]

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.

[Aravinthan Seetharaman]

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> 

 

  

Sample: https://www.syncfusion.com/downloads/support/forum/154179/ze/ContextMenu-1497965721  

 

Could you please check the above details, and get back to us with more information, if you need assistance on this. 

 

Regards, 

Aravinthan S