How to add context menu option in each rows of a polymer vaadin grid

Question

I am new to polymer. I want to create a vaadin grid with an iron-icon at the end of each row. On clicking this icon, the context menu is shown.

As of now I have created a vaadin grid with 5 columns. I want to have a sixth column with no column name and the iron icon "icons:more-vert" as the column value for all the rows. How to do it? Thanks in advance.

Answer 1

via the rowDetailsGenerator

grid.rowDetailsGenerator = function(rowIndex) {
  var elem = document.createElement('div');
  elem.setAttribute('class', 'userdetailswrapper');

  grid.getItem(rowIndex, function(error, item) {
    if (!error) {
      elem.innerHTML = getUserDetails(item.user);
    }
  });

  return elem;
};

var detailsOpenIndex = -1;

// Show details for the selected row
grid.addEventListener('selected-items-changed', function() {
  grid.setRowDetailsVisible(detailsOpenIndex, false);
  var selected = grid.selection.selected();
  if (selected.length == 1) {
    grid.setRowDetailsVisible(selected[0], true);
    detailsOpenIndex = selected[0];
  }
});