How to open context menu on right click, using Angular 7?

[doll612]

General Question, Topic

Your Environment

Software	Version(s)
Angular	7.1.4
Angular-Slickgrid	2.9.8
TypeScript	3.1.6
Operating System	win 10
NPM/Node/Yarn	6.4.1/10.13.0

Context

Expected Behavior

Current Behavior

Possible Solution

Code Sample

Thanks,

[ghiscoding]

Are you talking about this example, shown at the bottom?

I've never done any implementation or need such thing, but you can easily reproduce by using the SlickGrid grid object (and maybe the DataView object as well) directly. It's not a plugin or anything, it's just plain DOM element with jQuery events attached to them. I'm sure you can reproduce that easily, following the SlickGrid Context Menu code.

[coolrb]

We have implemented this functionality using a mix of jquery code.
First you need to define menu - html in your component like

<ul id="contextMenu" style="display:none;position:absolute">
   <b>Set priority:</b>
   <li data="Low">Low</li>
   <li data="Medium">Medium</li>
   <li data="High">High</li>
</ul>

And then define a method in your component to actually show the context menu

contextMenu(e) {
    console.log('Event ',e);
    e.preventDefault();
    const eventData = e.detail.eventData;
    var cell = this.angularGrid.slickGrid.getCellFromEvent(e);
    var x = e.pageX - 250;// $(e.target).offset().left;
    $("#contextMenu")
        .data("row", cell.row)
        .css("top", e.pageY)
        .css("left", x)
        .show();
    $("body").one("click", function () {
      $("#contextMenu").hide();
    });
}

And finally calling this in rowSelection event like
this.contextMenu(evt);
You need to have jquery installed

[ghiscoding]

Thanks for the code sample, I knew it wasn't that hard to implement with raw javascript/jQuery code.

You need to have jquery installed

jQuery is a dependency of this library, so you have no choice but to have it installed 😉

[ghiscoding]

not yet released it will come in the new year

[ghiscoding]

@doll612 @coolrb
This is now live as a new feature. Check out latest version 2.15.x

Cheers ⭐️

[doll612]

Thanks, @ghiscoding.