Kendo-dropdown Selected value as a icon

[Rahul]

When i select any value in drop down i need selected value as a icon. Hear i am attaching a sample wire frame. 

[Martin]

Hello Rahul,

Thank you for the provided screenshot. Unfortunately it is not enough for me to understand what widget are you using. Could you please provide some additional information about that?

If you are using some of the dropdown widgets (e.g DropDownList) you can add an icon using the template configuration. Here is a Stackblitz example for reference.

If this does not completely match your scenario, please get back to me with more details and I will be happy to assist you.

Regards,
Martin
Progress Telerik

[Rahul]

Thank you for you response.

Main widget i used is kendo-drop-down-list in vue js. Actually i want to implement the scenario as like when i select any item from drop down list the selected value shown as a icon not as a text. that example i attached in screenshot. 

[Martin]

Hello Rahul,

Thank you for sharing the details. You can use the valueTemplate to show only the icon. I have modified the Stackblitz example with the configuration.

Let me know if this works for you. 

Regards,
Martin
Progress Telerik

[Rajesh]

Hi Martin,

Having same requirement, gone through the above example.

In above example (https://stackblitz.com/edit/42dm3e?file=index.js) used absolute url for image source.

I am unable to add relative path for same (like - @/assets/images/icon.png).

If add any relative path, it is taking - https://localhost/8080 + relative path.

Thanks!

 

 

[Martin]

Hello Rajesh,

I can see that the relative path you wish to add contains an assets folder. From that, I assume that you are using Webpack in your project. In that case, according to this Project Structure article, that folder would be within a src folder. In order to set the correct relative path, it should start from the root.

Let me know if this works for you, or if I am missing some details.

Regards,
Martin
Progress Telerik