Right click context menu for Tree Widget

Widgets
1

Hi,
in our <PROJECT_NAME>-usability project we only use the a12 widget library. We display a tree using const InteractiveTree = Selectable(Collapsible(TreeAdapter(Tree))); this widget. I have the requiremet to add a right click context menu to the tree. To my knowledge this does only exist for the tree rendered in our a12 TreeEngine. Is this somehow also possible for the widget?
Are there any examples?

Thanks in advance!

2

Hi @nick-linked-tensor

there is no Context Menu in the tree widget per default.
Important note: Tree Engine is not making use of the Tree Widget. Instead it uses the TreeTable Widget and underlaying table features.

To implement your own custom right click context menu on a tree node i can imagine that you combine the implementation that is done in tree-engine (using the TreeTable → Table) with the creation of the Tree template in your const InteractiveTree = Selectable(Collapsible(TreeAdapter(Tree)));

So check out these:

  • useContextMenu for easy to copy util for contextmenu event
    Widgets Table - Internal Utils
  • if it is enough for you use the label property of TreeNodeMode (scroll down) since it accepts a react node, create a sub node that listens to the onContextMenu return from useContextMenu (!this approach will not affect the whole tree row)
  • to the subnodes add an attached portal and whatever kind of component you want to display as context menu

HINT: i did not evaluated but maybe there is another way to achive the correct ref for the bound tree node instead of using the label.

HINT 2: It sounds like a good requirement for Widgets to expose the nodes created by Tree for futher customization, feel free to create one :slight_smile:

3

Hi @markus-agile-fog

I got it working now. I added a onContextMenu listener to the whole tree that translates the id of the cliked element to the corresponding node of the tree. If anyone is interested in the exact code just message me.

And regarding creating a requirement: The project develops a prototype so I am not sure if this would work with requesting features.