Listbox contextmenu

[Richard Craig]

Does anybody have an example of adding a contextmenu to a listbox?
I'm struggling to get the item data for the item selected.

FYI, we also need to have multiple listboxes on the same page with different menus

Thanks

Richard

[Gayathri KarunaiAnandam]

Hi Richard, 

 

We have prepared a sample based on your requirement. Please check the below code snippet. 

 

 this.selectFunction = (args) => { 

      console.log(values); 

    }; 

 

    this.beforeOpen = (args) => { 

      values = []; 

      values.push(args.event.target.getAttribute('data-value')); 

    } 

  } 

 

  render() { 

    return ( 

          <div id="listbox-control"> 

            <h4>Select your favorite car:</h4> 

            <ListBoxComponent 

              id="listbox1" 

              dataSource={this.data} 

            /> 

          </div> 

          <div id="contextmenu-control"> 

            <div id="contextmenutarget">{this.content}</div> 

            <ContextMenuComponent 

              target="#listbox-control" 

              items={this.menuItems} 

              beforeOpen={this.beforeOpen} 

              select={this.selectFunction} 

            /> 

          </div> 

         

    ); 

  } 

} 

 

 

For your reference, please check the below sample link. 

 

Sample: https://stackblitz.com/edit/react-qfowm7-dkpdsi?file=index.js 

 

If we misunderstood your requirement, please share more information about your exact requirement. Based on that we will check and update promptly. 

 

Regards, 

Gayathri K 

[Richard Craig]

Thanks for the reply.

We'll have a go at this. I think the problem we had was sorting out the context menu target but your example makes that clearer.

[Gayathri KarunaiAnandam]

Hi Richard, 

 

We are glad to hear that your requirement has been fulfilled. Please let us know if you need any other assistance.  

 

Regards, 

Gayathri K