AUTHOR: Marin Bratanov
DATE POSTED: December 31, 2018
Cannot change color of DropDownList items. Setting the ForeColor and BackColor properties does not work.
Sample snippet that does not work:
<
telerik:RadDropDownList
ID
=
"RadDropDownList1"
runat
"server"
SelectedText
"DropDownListItem1"
>
Items
telerik:DropDownListItem
BackColor
"#FFFF80"
ForeColor
"Red"
Selected
"True"
Text
/>
"DropDownListItem2"
</
The way to alter colors and backgrounds is, generally, with CSS so you can provide selectors that are specific enough for the HTML structure you are targetting.
The simple ASP.NET properties above may not always work for our controls (documentation reference here).
Use the CssClass property and a suitable selector to alter the appearance of the items.
For example, the following will alter just a specific item:
<style>
.rddlPopup .rddlItem.redItem {
color
:
red
;
background
#FFFF80
}
</style>
<telerik:RadDropDownList ID=
runat=
SelectedText=
<Items>
<telerik:DropDownListItem runat=
CssClass=
"redItem"
Selected=
Text=
</Items>
</telerik:RadDropDownList>
If you want to affect all items, here's a sample rule that simply does not cascade through a class you have to set on every item:
.rddlPopup .rddlItem {
These two rules would affect all RadDropDownList instances on the rendered page, however, so you may want to make them more specific and target only certain instances. To to that, add a class to the dropdown element with JavaScript:
.rddlSlide.specificDropdownClass .rddlItem {
OnClientLoad=
"setDropDownClass"
"RadDropDownList2"
RenderMode=
"Classic"
<script>
function setDropDownClass(sender, args) {
$telerik.$(sender.get_dropDownElement()).addClass(
"specificDropdownClass"
);
</script>
Resources Buy Try