# \[Announce\] node-red-contrib-ui-contextmenu

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211>\
**Category:** Share Your Nodes\
**Created:** [2 October 2019 18:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211 "2019-10-02T18:05:53Z")\
**Posts on this page:** 16\
**Page:** 3

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 March 2020 07:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/41 "2020-03-03T07:35:32Z")

</div>

> [@afelix](#):
>
> add things to the appcache

Hey Lena,  
Not that I know. And I don't think my old partner @Steve-Mcl has added something like that...

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [3 March 2020 10:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/42 "2020-03-03T10:23:35Z")

</div>

Hi Paul,  
Can you please share how you did the burger menu button. That would help me a lot.  
Thank you.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [3 March 2020 10:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/43 "2020-03-03T10:59:28Z")

</div>

It's just a ui-button with `fa-navicon fa-2x` added to the Icon property in the node's config.  
The Label is left blank.

```auto
[{"id":"11664387.63fb8c","type":"ui_button","z":"c9c4eeb8.bad8e","name":"","group":"f93124ac.7c74c8","order":1,"width":2,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"#2A2A2A","icon":"fa-navicon fa-2x","payload":"","payloadType":"str","topic":"","x":140,"y":280,"wires":[["9698471f.961b68"]]},{"id":"f93124ac.7c74c8","type":"ui_group","z":"","name":"Chart","tab":"6cb7ce21.162a1","order":1,"disp":true,"width":"22","collapse":false},{"id":"6cb7ce21.162a1","type":"ui_tab","z":"","name":"Realtime Power","icon":"dashboard","order":9,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [3 March 2020 11:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/44 "2020-03-03T11:26:34Z")

</div>

Thanks, I thought you found a way to determine the x and y coordinates for that button to feed into the context menu. That is what I`m desperately looking for:

A way to anchor a position on the dashboard (like a button, but could be a dummy too, which can deliver the coordinates. It would be perfect if the ui-button node issues the x,y, of the mouse and x1,y1,x2,y2 coordinates of the button area on every press somewhere hidden (`msg.ui_control.x1`) for example. Or a general upgrade to the ui-control node to emit x.y coordinates on every mouse press ("Output: mouse events") perhaps here:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f9a11864bb20196bbd3e83b6f626fbcfd4ee467.png)  
Than would be "universal" solution and only there if needed.

To hum it may concern: "Is this an idea that could be realized? Sometimes?"

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [3 March 2020 12:01 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/45 "2020-03-03T12:01:59Z")

</div>

I know I'll get abuse from @BartButenaers & @Steve-Mcl for suggesting this, but...

It would be great if a specific new node was created that combined the button and context menu, so instead of providing coordinates, the menu would always fall gracefully from the node itself.

Currently using coordinates, the menu appears at slightly different positions relative to the ui- button, depending upon the browser (laptop v phone v tablet).

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 March 2020 22:08 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/46 "2020-03-03T22:08:10Z")

</div>

> [@Paul-Reed](#):
>
> It would be great if a specific new node was created that combined the button and context menu

Will try to implement it as soon a I am retired, which is in about 21 years. So please be a bit patient ....

But instead of creating combinations of nodes, "_perhaps_" a UI node could send:

- The _clicked coordinates_ (like we currently do)
- The _bounding box (minX, minY, maxX, maxY) of the element that has been clicked_.

Then you can calculate in your flow where you want to show the contextmenu. E.g. when you want to have the contextmenu to appear in the center of a button, then you just calculate the center of the button yourself. (ButtonNode --\> FunctionNode (calculate the location) --\> ContextMenuNode).

Just a wild idea... Not sure whether this is possible, and no time at the moment to try something...

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [3 March 2020 22:22 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/47 "2020-03-03T22:22:59Z")

</div>

As I wrote before .... If I would use the existing `ui-control` node with one extra option.

I expect it already sits on the correct position to catch these events ...

But I have

- so many other things to do
- not enough knowledge of HTML and framework stuff
- need somebody to slow down the earth, 24h are not enough.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [3 March 2020 22:29 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/48 "2020-03-03T22:29:50Z")

</div>

> [@Christian-Me](#):
>
> It would be perfect if the ui-button node issues the x,y, of the mouse and x1,y1,x2,y2 coordinates of the button area

Oeps, completely overlooked your sentence in the flood of feedback I get from all over the place at the moment. But then at least we are the same wavelength 😉  
But never used the ui-control node myself, so hopefully someone else (reading this) has some time to experiment with it. Otherwise our proposal will die a slow dead here and now ...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 22:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/49 "2020-03-03T22:32:50Z")

</div>

> [@Christian-Me](#):
>
> need somebody to slow down the earth

slowing trend is about 2.3 milliseconds per century ...

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [3 March 2020 22:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/50 "2020-03-03T22:33:29Z")

</div>

> [@BartButenaers](#):
>
> completely overlooked your sentence in the flood of feedback I get from all over the place at the moment

It's your own fault Bart, you shouldn't share such interesting & useful nodes 😆  
(But I'm grateful that you have)

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [3 March 2020 22:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/51 "2020-03-03T22:52:16Z")

</div>

> [@hotNipi](#):
>
> slowing trend is about 2.3 milliseconds per century

Than I have to live a little bit longer, a few centuries perhaps ?

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [3 March 2020 22:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/52 "2020-03-03T22:59:58Z")

</div>

No problem, happening myself from time to time.  
Thank you for this node help to keep the dashboard clean from rarely used but sometimes useful options.  
Still desperately seeking for an anchor on the dashboard to use it more often.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [7 March 2020 22:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/53 "2020-03-07T22:11:31Z")

</div>

> [@Paul-Reed](#):
>
> Is there anyway the menu can always be on the uppermost layer.

Version _ **1.0.10** _ is now available:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b318fb663202396d2296be5964ba56ea019bd07.png)

With this version, @Paul-Reed has confirmed that the contextmenu is always drawn on top.

---

<div class="post-metadata">

**Author:** ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)\
**Post date:** [2 November 2021 09:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/54 "2021-11-02T09:32:06Z")

</div>

Hi ! I know it;s kinda late. But may I know how you set the X and Y in your ui-Table?  
I can't see properties of X and Y when I clicked my table.

Thank you.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [2 November 2021 11:04 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/55 "2021-11-02T11:04:45Z")

</div>

Hi, no problem to be late.  
What you need is one or more callbacks injected into ui-table via `msg.ui_control` i.e.

```auto
{
    "customHeight": 18,
    "tabulator": {
        "columns": [
            {
                "field": "expand",
                "headerTooltip": "click to expand more details",
                "headerContext": "function(e,column){ this.send({ui_control:{callback:'headerContext'},position:{\"x\":e.x,\"y\":e.y},payload:column.getFieled()}); e.preventDefault(); }"
            }
        ]
    }
}

```

The function in a more readable format you can define for every column, cell or row ... (this one only reacts on context (right) clicks on the header

```auto
var headerContext= function (e, column) {
    this.send(
        {ui_control: { callback: 'headerContext' },
         position: { "x":e.x,"y":e.y},
         payload:column.getField()
        }
    );
    e.preventDefault();
}

```

there is a `cellContext` or `rowContext` too with slightly different parameters

> **[Tabulator - Interactive JavaScript Tables](http://tabulator.info/docs/4.7/callbacks)**
>
> Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library.

---

<div class="post-metadata">

**Author:** ![Henjoe](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/henjoe/32/52335_2.png) [@Henjoe](https://discourse.nodered.org/u/Henjoe)\
**Post date:** [8 December 2021 03:20 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211/56 "2021-12-08T03:20:08Z")

</div>

Hi Christian,

I posted question regarding row context Menu not working on the table.  
I hope you can help me.

> [@Ui-table row contextmenu doesn't work?](https://discourse.nodered.org/t/ui-table-row-contextmenu-doesnt-work/54851):
>
> Hello, I am trying to add Context menu on node-red-ui-table using the msg.ui\_control as seen below: However, It doesn't work when I right-clicked on my table. As per Tabulator's manual: I don't know what I did wrong. Hoping for your guidance. or a confirmation if it is not possible on this table? Thank you Node-red experts slight_smile Regards, Henjoe

[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-contextmenu/16211.md?page=2)