Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
vaadin grid newbie question
Hello everybody,
I'm making use of several vaadin elements for a school project I've been working on. I'm not totally 100% on all the nitty-gritty specifics concerning how web components work just yet, and I've hit a bit of a wall trying to do something that I feel should be fairly simple. I have an iron-icon in the cells of one of the columns. I only want that icon to display for the row that is active/selected, but I'm having issues either accessing the specific element or doing it in some blanket css. How can I accomplish this? If I could get the selected row's index I would have no problems, but I hours of googling and reading the docs have not gotten me any closer to that. I don't really care how I go about it, as long as it works. What's the proper way to do this? My grid:
<vaadin-grid id="playlistGrid" items='{{songList}}' active-item="{{activeItem}}">
<vaadin-grid-column>
<template>
<iron-icon id="playIcon[[index]]" class="playIcon" icon="vaadin:play"></iron-icon>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Name</template>
<template>[[item.name]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">album</template>
<template>[[item.albumName]]</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">artist</template>
<template>[[item.artistName]]</template>
</vaadin-grid-column>
</vaadin-grid>
Hi Ian,
If you wan’t the element to be hidden for non-selected items you could bind the template’s instance property “selected” to the element’s “hidden” property as follows:
<iron-icon hidden=“[[!selected]]”>
or if you want to use the grid’s “active item” for example, you can utilize a computed binding as follows (in this snippet the "item" is an internal instance property and "activeItem" is the property you already extracted in your example):
<iron-icon hidden=“[[_isItemHidden(item, activeItem)]]”>
and then implement “_isItemHidden” to return true when the items don’t match.
Thank you for your help. I was able to get the functionality I was looking for with the second way. The first wouldn't work for some reason.