RadzenDropDown

Radzen.Blazor Components
1

I have a RadzenDataGrid with a column that has a RadzenDropDown. I would like the background of each item in the dropdown to be set to a different color; like the attached picture from a different application. The model for the dropdown has the hex code necessary.

dropdown
dropdown601×882 54.3 KB

thank you.

2

You can define Template for the DropDown component with desired styles/colors.

3

Can you provide a sample/example of what that might look like? The template here would change the background color of the grid cell vs the DropDown items.

      <RadzenDataGridColumn TItem="ParticipantViewModel" Property="pColorItem" Title="Color" Context="item" Width="200px">
         <!--
         <Template Context="item">
            <span style='background-color: @item.pColorHexCode'>@item.pColorHexCode</span>
         </Template>
         -->
         <EditTemplate Context="item">
            <RadzenDropDown @bind-Value="item.pColorItem" Data=@Colors TItem="Color.ColorItem" TextProperty="Name" ValueProperty="Hex" LoadData=@LoadColorData AllowClear="true" Placeholder="Select color" Style="width: 100%; max-width: 400px;" />
         </EditTemplate>
      </RadzenDataGridColumn>

thanks

4

You can simply place a DIV in the DropDown Template with style=“background-color: @data.YourProperty”.

5

That worked. Thank you.