Open ContextMenu relative to button with left-click

[Glen Alexander]

Hi,

I want to open the ContextMenu relative to the position of a button on page with the left mouse button click. I tried your example 'Open and close ContextMenu in Angular ContextMenu component', but the menu is opening at the co-ordinates relative to the browser window, and not where the button is on page.

<div class="form-input">

                            <label>Open Date</label>

                            <ejs-contextmenu id='contextmenu' target="#target" [items]='menuItems'></ejs-contextmenu>

                            <button ejs-button id="target" (click)="btnClick()">Open ContextMenu</button>

                        </div>

btnClick() {

        let contextmenuObj: ContextMenu = getInstance(document.getElementById("contextmenu"), ContextMenu) as ContextMenu;

        contextmenuObj.open(30, 0);

    }

    public menuItems: MenuItemModel[] = [

        {

            text: 'Cut'

        },

        {

            text: 'Copy'

        },

        {

            text: 'Paste'

        }

    ]; 

[Madhan Venkateshan]

Hi Glen Alexander, 

 

Good day to you. 

 

You can use ‘open’ method of context menu and set the position based on button position. Please refer the below sample link. And also we would let you know that we have Dropdown button component similar to your use case, please refer the sample browser link and documentation link. 

 

Sample link: https://stackblitz.com/edit/angular-kh6fmy?file=app.component.ts 

 

Dropdown button sample browser link: https://ej2.syncfusion.com/angular/demos/#/material/button/dropdown-button 

 

Dropdown button documentation link: https://ej2.syncfusion.com/angular/documentation/drop-down-button/getting-started/ 

 

Regards, 

Madhan V 

[Glen Alexander]

Hi,

Thanks for this. is there something similar that can be done for positioning a Dialog? So if I wanted to open a dialog directly underneath a button?

[Saranya Dhayalan]

Hi Glen Alexander,  

 

Most welcome 

 

We have checked your reported query, you can achieve this by using the position property. Please find the below code snippet: 

 

<div id="target" style="min-height: 175px;"> 

    <button class="e-btn" (click)="btnClick($event)">Open ContextMenu</button> 

    <div> 

        <ejs-dialog id='dialog' #ejDialog header='Dialog' showCloseIcon='true' content='This is a dialog with header' 

                    target='#target' [position]='position1' width='250px'> 

            <div style='padding:18px;padding-top:0px;'> 

            </div> 

        </ejs-dialog> 

    </div> 

 

For your convenience, we have prepared a sample link. Please find the below sample link 

 

Sample link: https://stackblitz.com/edit/angular-kh6fmy-i8hqat?file=app.component.html 

 

Please check the above sample and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D