JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › DropDownList › DropdownList with images › Reply To: DropdownList with images
October 1, 2021 at 12:31 pm
#102312
YavorDashev
Member
Hi tullio0106,
Yes it’s possible using ‘token-template’ property for which I have created yet another code example for how to achieve this functionality:
In your HTML file:
<template id="tokenTemplate">
<span><img class="avatar" src="" width="35" height="35" /></span>
<span>{{data}}</span>
</template>
<smart-drop-down-list
selection-display-mode="tokens"
token-template="tokenTemplate"
selection-mode='zeroOrMany'
drop-down-open-mode='dropDownButton'
display-member="value"
drop-down-height='800'
drop-down-width='1300'>
<smart-list-item value="first image">
<div>
<img src="your-img-src" alt="">
<p class="image-description"s> First image desscription </p>
</div>
</smart-list-item>
<smart-list-item value="second image">
<div>
<img src="your-img-src" alt="">
<p class="image-description"> Second image desscription </p>
</div>
</smart-list-item>
</smart-drop-down-list>
This time we will need to add some JavaScript as well:
window.onload = function () {
document.querySelector('smart-drop-down-list').addEventListener('change', function () {
const tokens = this.getElementsByClassName('smart-token');
for (let i = 0; i < tokens.length; i++) {
if (tokens[i].textContent.indexOf('first image') > -1) {
tokens[i].getElementsByClassName('avatar')[0].src = 'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg';
}
else if (tokens[i].textContent.indexOf('second image') > -1) {
tokens[i].getElementsByClassName('avatar')[0].src = 'https://hatrabbits.com/wp-content/uploads/2017/01/random-word-1.jpg';
}
}
});
}
And again the needed CSS:
smart-drop-down-list{
min-height: 35px;
height: auto;
width: 30%;
}
.smart-list-item-container img {
width: 70%;
height: 100%;
}
smart-list-item .smart-content,
smart-list-item .smart-overlay,
smart-list-item,
smart-drop-down-list {
height: 300px;
}
.smart-list-item-container .image-description {
display: block;
position: absolute;
z-index: 99999;
top: 0;
left: 70%;
}
.avatar {
border-radius: 50%;
}
.smart-token > span:first-of-type {
padding-left: initial;
}
.smart-token {
margin-left: 5px;
}
.smart-token > span {
display: table-cell;
vertical-align: middle;
padding-left: 5px;
}
smart-drop-down-list[selection-display-mode="tokens"] .smart-selection-field > .smart-token {
box-shadow: initial;
}
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/