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.