This is a migrated thread and some comments may be shown as answers.

Kendo-dropdown Selected value as a icon

5 Answers 429 Views
This is a migrated thread and some comments may be shown as answers.
Rahul
Top achievements
Rank 1
Rahul asked on 11 Oct 2019, 06:32 AM
When i select any value in drop down i need selected value as a icon. Hear i am attaching a sample wire frame. 

5 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 15 Oct 2019, 06:03 AM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rahul
Top achievements
Rank 1
answered on 15 Oct 2019, 06:32 AM

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. 

0
Martin
Telerik team
answered on 16 Oct 2019, 02:41 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rajesh
Top achievements
Rank 1
answered on 22 Oct 2019, 03:16 PM

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!

 

 

0
Martin
Telerik team
answered on 24 Oct 2019, 03:05 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Rahul
Top achievements
Rank 1
Answers by
Martin
Telerik team
Rahul
Top achievements
Rank 1
Rajesh
Top achievements
Rank 1
Share this question
or