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

Add Icon to Selected Item

1 Answer 840 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
Ilan asked on 07 Mar 2021, 09:42 AM

I would like to add an Icon next to the selected item text as shown in the attached image.

 

Is it possible?

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 08 Mar 2021, 11:51 AM

Hello Ilan, 

You can use the ValueTemplate to add custom content to the main element of the dropdownlist. You can also see how to use Telerik Font Icons in the Icons article.

If you want to select dates (judging by the icon), I can suggest you use the DatePicker component instead of the DropDownList component.

Here is an example I made for you:

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" Value="1">
    <ValueTemplate>
        <TelerikIcon Icon="calendar" />&nbsp;<strong>@((context as MyDdlModel).ExtraField)</strong>
    </ValueTemplate>
</TelerikDropDownList>


@code {
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
        public string ExtraField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x =>
            new MyDdlModel
            {
                MyTextField = "item " + x,
                MyValueField = x,
                ExtraField = "more item info " + x
            }
        );
}

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownList
Asked by
Ilan
Top achievements
Rank 1
Bronze
Iron
Veteran
Answers by
Marin Bratanov
Telerik team
Share this question
or