CODEWITHSUNDEEP
javascripthtmlelectron
Tejashwi Kalp Taru
Tejashwi Kalp Taru

Reputation: 3064

How to show electron context menu upon right click on table row

I am trying to learn Electron and building a simple application. In the HTML part, I have table with some rows.
I have created the context menu using "electron-context-menu" NPM package. Now I want that when I right click on any row of the table then some menu will popup, like remove row.
For example, I have a row like below:

<tr>
  <td id="name-1"></td>
  <td id="prog-1"><progress id='progress-1' max='100' value='0'> </progress></td>
  <td id="size-1"></td>
  <td id="status-1"></td>
  <td style="display:none;" id="path-1"></td>
  <td style="display:none;" id="link-1"></td>
  <td style="display:none;" id="formatid-1"></td>
</tr>

Now when I right click on this row, then only the remove row menu should appear and upon click of that menu, I want to call a function deleteRow(this) which will remove the row.
For dynamically adding and deleting rows, I am using code from:

here is JSFiddle

Any help? Also, how can I get the id of element in row?

Upvotes: 5

Views: 4376

Answers (2)

Tejashwi Kalp Taru
Tejashwi Kalp Taru

Reputation: 3064

I found answer myself:

const menu = new Menu();
menu.append(new MenuItem({
  label: 'Resume', click(){
    console.log('resume clicked');
  }
}));
menu.append(new MenuItem({type: 'separator'}));
menu.append(new MenuItem({
  label: 'Pause', click(){
    console.log('item 2 clicked');
  }
}));

And where I am adding dynamic rows:

new_row.addEventListener('contextmenu', function(e){
      var t = e.srcElement.id.split('-');
      id = t[1];
      menu.popup(remote.getCurrentWindow());
    });

Upvotes: 1

KBIIX
KBIIX

Reputation: 911

Add false parameter after callback.

new_row.addEventListener('contextmenu', function(e){
    var t = e.srcElement.id.split('-');
    id = t[1];
    menu.popup(remote.getCurrentWindow());
}, false);

Upvotes: 1

Related Questions