Color code dropdownlist item

2 Answers 62 Views
DropDownList
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
Kevin asked on 19 Sep 2023, 08:23 PM

Is there a way to have a dropdownlist item be a color based on some criteria?

 

 

2 Answers, 1 is accepted

Sort by
1
Tino
Top achievements
Rank 1
Iron
answered on 20 Sep 2023, 12:18 PM | edited on 20 Sep 2023, 12:26 PM

Hello Kevin,
for sure it is possible.

an appropriate css should you then still compile in this case here colorIndicatorDropDownListClass with appropriate values...

dropdownList like this:

<TelerikDropDownList Data="_enumList" ValueField="Key" TextField="Value" @bind-Value="@Value" ScrollMode="DropDownScrollMode.Virtual" Filterable="@IsFilterAble" FilterOperator="StringFilterOperator.Contains" ItemHeight="35" PageSize="10" Enabled="@(!IsReadOnly)" Class="colorIndicatorDropDown"> <DropDownListSettings> <DropDownListPopupSettings Class="colorIndicatorDropDownListClass" /> </DropDownListSettings> <ItemTemplate> @{ var itemSelection = context.Key; <span class="colorIndicator"> <i class="fa-solid fa-circle @itemSelection"></i> <label >@context.Value</label> </span> } </ItemTemplate> <ValueTemplate> @{ var i = context.Key; <span class="colorIndicator @i"> <i class="fa-solid fa-circle @i"></i> <label class="@i">@context.Value</label> </span> } </ValueTemplate> </TelerikDropDownList>

1
Hristian Stefanov
Telerik team
answered on 20 Sep 2023, 01:32 PM

Hello,

I confirm that Tino's approach is indeed valid. On a related note, there's an alternative method that eliminates the need for using an ItemTemplate – you can leverage the OnItemRender event. Feel free to check out our documentation for more details and a practical example: OnItemRender Docs.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
commented on 25 Sep 2023, 06:11 PM | edited

I tried both Tino's and your approach using OnItemRender and the only problem is that the items initially look good, however when I select an item the list then looks like it resets itself without the criteria style being applied.  Basically it does not retain the style.
Tino
Top achievements
Rank 1
Iron
commented on 26 Sep 2023, 06:20 AM

Hello Kevin,
i have created a small repo.
Here you find the way how I solved it with the colored dropdown. May it will help you a bit.

ColoredDropdown Repo

Tags
DropDownList
Asked by
Kevin
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Tino
Top achievements
Rank 1
Iron
Hristian Stefanov
Telerik team
Share this question
or