Open context menu by left-clicking an icon located on a TreeView node

[Gianluca]

Hi!

I'm working with the TreeView component just like the one you provide here: https://ej2.syncfusion.com/react/documentation/treeview/drag-and-drop/

I'd like to add an custom icon to the very right of each node that allows to open a context menu when left-clicked.

The actions must be binded to the clicked node.

I uploaded an example in the attachments.

Thanks in advance.

Attachment: example_d2d1573a.7z

[Sowmiya Padmanaban]

Hi Gianluca ,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with TreeView component. You can add the icons in TreeView node using nodeTemplate property of TreeView component and display the context menu using open method of Context menu component. 

 

Please, refer the below code snippet. 

 

 <TreeViewComponent 

              id="treeview" 

              ref={treeview => { 

                this.treeObj = treeview; 

              }} 

              allowEditing={true} 

              fields={this.fields} 

              nodeTemplate={this.nodeTemplate.bind(this)} 

            /> 

            <ContextMenuComponent 

              id="contentmenutree" 

              items={this.menuItems} 

              select={this.menuclick.bind(this)} 

              ref={contextmenu => { 

                this.menuObj = contextmenu; 

              }} 

            /> 

  nodeTemplate(data) { 

    return ( 

      <div> 

        <div className="treeviewdiv"> 

          <div className="textcontent"> 

            <span className="treeName">{data.name} - </span> 

            <span className="treeName">{data.value1}</span> 

            <span 

              className="e-icons close-icon" 

              onClick={this.btnClick.bind(this)} 

              style={{ float: "right" }} 

            /> 

          </div> 

        </div> 

      </div> 

    ); 

  } 

 btnClick(args) { 

    this.menuObj.open(args.clientY, args.clientX, args.currentTarget); 

  } 

 

.e-treeview.e-fullrow-wrap .e-text-content { 

  pointer-events: none; 

} 

 

Please, refer the sample link below. 

 

https://stackblitz.com/edit/react-zlcmxz-byuzmq?file=index.js 

 

Please, refer the below links for TreeView component. 

 

UG Documentation- https://ej2.syncfusion.com/react/documentation/treeview/getting-started/ 

 

Demo link- https://ej2.syncfusion.com/react/demos/#/material/treeview/default 

 

API reference- https://ej2.syncfusion.com/react/documentation/api/treeview/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Gianluca]

Hi Sowmiya!

Thanks a lot for the support it works perfectly! :)

Regards,

Gianluca

[Muthukrishnan Kandasamy]

 

Hi Gianluca, 

 

We are glad to know that our provided solution met your requirement. Please get back to us if you need assistance. 

 

Regards, 

Muthukrishnan K