Color code dropdownlist item

[Kevin]

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

 

 

[Tino]

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>

[Hristian Stefanov]

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

[Kevin]

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]

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