Treeview button dropdown menu

Question

Good day,I am trying to implement the treeview component and add the three dots option for us to be able to get a dropdown/context menu for each level.  How do i make the context menu/ dropdown menu appear as you click on the three dots.

SureshRajan Alagarsamy · Answer

Hi Nqaba,We have reviewed your query and understand that you are
looking to open the ContextMenu when clicking on the dot icons in the TreeView
component. To achieve this, we have utilized the ContextMenu component's
“target”
property and assigned it the class name of the icon element. This
implementation allows the ContextMenu to open when the dot icon in the TreeView
component is clicked.We have attached sample for your reference.Sample : https://stackblitz.com/edit/angular-ce8dgh-9ywn9c?file=src%2Fapp.component.tsRegards,
Suresh.

nqaba nleya · Answer

Good day, thanks for your response.This sample only works when you right click only, the user might not be intuitive enough to know that they have to right click to get the menu and ive struggled to make the context menu appear when you left click. Please assist on that. And when i right click on the three dots i need to know the item ive just right clicked on so that i can show different menu items on the context menuKind Regards, Nqaba Nleya

SureshRajan Alagarsamy · Answer

Hi Nqaba,We have reviewed your query and understand that you have two requirements in the TreeView component. We suggest you to follow the below details to get answer for your queries.Query 1 : How to detect if the user performed a right-click?To detect whether a user performed a right-click, we recommend using the “beforeOpen” event of the ContextMenu component. If the event contains a button value of 2, it indicates a right-click.Refer to the below code snippet for further reference. [app.component.html] [app.component.ts] ..... beforeOpen(args) { if (args.event.button === 2) { console.log('Right button clicked.'); } } Query 2 : How to open the context menu on a left-click?To open the context menu on a left-click, we suggest using the “nodeClicked” event of the TreeView component. In the event handler, check if the button value is 0 (indicating a left-click) and verify if the event target matches the required class name or element. If the condition matches open the context menu using the “open” method.Refer to the below code snippet for further reference. [app.component.html] [app.component.ts] nodeClicked(args) { if (args.event.button === 0 &&(args.event.target.classList.contains('nodeicon') || args.event.target.classList.contains('e-more-horizontal-1'))) { console.log('Left button clicked.'); let contextmenuObj: ContextMenu = getInstance(document.getElementById('contentmenutree') as HTMLElement, ContextMenu) as ContextMenu; contextmenuObj.open((event as any)?.y, (event as any)?.x); } } We have also attached a sample for your reference.Sample : https://stackblitz.com/edit/angular-ce8dgh-wu6v5e?file=src%2Fapp.component.tsRegards, Suresh.

nqaba nleya · Answer

Good day,Even after right clicking, i still need to know which item was clicked on so that i can populate my context menu.Kind RegardsNqaba

SureshRajan Alagarsamy · Answer

Hi Nqaba,We have reviewed your query and understand that you would
like to retrieve the tree item selected through a right-click in the TreeView
component. To achieve this, you can use the beforeOpen event handler and
access the target element from the event arguments. This will allow you to
identify the closest list element associated with the right-click action.Refer to the below code snippet for further reference.

[app.component.ts]
   
  beforeOpen(args) {
      if (args.event.button === 2) {
        console.log('Right button clicked.');
        var selectedEle = args.event.target;
        var selectedNode = selectedEle.closest('.e-list-item');
      }
  }

We have also attached a sample for your reference.Sample : https://stackblitz.com/edit/angular-ce8dgh-9oq4dh?file=src%2Fapp.component.tsRegards,Suresh.