Vaadin-grid. One column content to be one icon, Polymer 3

Flow
1

Hi gurús,

I’m working in a Polymer3 project with vaadin-grid.

For columns what the cell content is text I use the syntaxis in this way shown below in bold and it works fine:

**<vaadin-grid-sort-column path="{{hdr.name}}" header="{{hdr.header_label)}}"></vaadin-grid-sort-column>**

For the icon I’m trying to use it in this other way:

                <vaadin-grid-column><template> 
   				<img id="icon"  height="80" width="100" src="{{row.value}}">                   
               </template></vaadin-grid-column>

The vaadin-grid main tag is in the way of:

**<vaadin-grid id="mygridid" items="{{row}}" on-selected-items-changed="itemSelected" selected-object="{{selectedObject}}"> 			**

Basically I’m running a do-repeat based on the hdr variable value but then for the img I need the value from the row variable or am I missing something obvious and I’m blind?

Thanks in advance
Regards,

2

I think we do not yet have Polymer 3 example of this, but if you go to https://vaadin.com/components/vaadin-grid/html-examples/grid-columns-demos you will find an example of image rendered to a column using iron-image, JavaScript looks like this :

columns[1]
.renderer = function(root, column, rowData) {
  if (!root.firstElementChild) {
	root.innerHTML = '<iron-image width="30" height="30" sizing="cover"></iron-image>';
  }
  root.firstElementChild.alt = rowData.item.name.first + ' ' + rowData.item.name.last;
  root.firstElementChild.src = rowData.item.picture.thumbnail;
};

The same idea can be applied with iron-icon as well.

If you like to use [Vaadin Icons]
(https://vaadin.com/components/vaadin-icons/html-examples), it is easy with iron-icon, just install the package

npm i @vaadin/vaadin-icons --save

and refer to them like this

<iron-icon icon="vaadin:vaadin-h"></iron-icon>

3

Hi Tatu,

Finally I got what is required. The current item is in context through the variable item so I can get it by {{item.my_icon}}

As the dom-repeat was based on the header array variable then I did not link that the {{item.zzz}} was in context in that moment …

Thanks a lot!