
Paul Evers
Top achievements
Rank 2
Paul Evers
asked on 30 Jan 2013, 04:06 PM
Hi,
I have a RadCombobox which displays a status:
I want the backgroundcolor of the combobox to be dependent of the selected value (e.g. New -> blue, Selected -> green etc.).
Preferably I want to solve this with different styles from a stylesheet.
is this possible and how do I do this?
Paul
I have a RadCombobox which displays a status:
|
|
|
|
|
I want the backgroundcolor of the combobox to be dependent of the selected value (e.g. New -> blue, Selected -> green etc.).
Preferably I want to solve this with different styles from a stylesheet.
is this possible and how do I do this?
Paul
5 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 31 Jan 2013, 05:08 AM
Hi Paul Evers,
Please take a look into the following CSS I tried to give backgroundcolor for the RadComboBox SelectedItem.
C#:
CSS:
Regards,
Princy.
Please take a look into the following CSS I tried to give backgroundcolor for the RadComboBox SelectedItem.
C#:
protected
void
RadComboBox_SelectedIndexChanged(
object
sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
{
string
_selectedItem = RadComboBox.SelectedItem.Text;
switch
(_selectedItem)
{
case
"New"
:
RadComboBox.InputCssClass =
"New"
;
break
;
case
"Selected"
:
RadComboBox.InputCssClass =
"Selected"
;
break
;
case
"Not Selected"
:
RadComboBox.InputCssClass =
"NotSelected"
;
break
;
case
"Mandatory"
:
RadComboBox.InputCssClass =
"Mandatory"
;
break
;
case
"Rejected"
:
RadComboBox.InputCssClass =
"Rejected"
;
break
;
default
:
RadComboBox.InputCssClass =
"default"
;
break
;
}
}
CSS:
<style type=
"text/css"
>
.New
{
background-color
:Blue
!important
;
}
.Selected
{
background-color
:Green
!important
;
}
.NotSelected
{
background-color
:Yellow
!important
;
}
.Mandatory
{
background-color
:Cyan
!important
;
}
.Rejected
{
background-color
:Beige
!important
;
}
.
default
{
background-color
:Transparent
!important
;
}
</style>
Regards,
Princy.
0

Paul Evers
Top achievements
Rank 2
answered on 01 Feb 2013, 03:54 PM
Hi Princy,
This is working fine at the server-side. I want to change the color also when I change the selected item without a need for a postback. Is it possible to set the class in jquery/javascript ?
Regards, Paul
This is working fine at the server-side. I want to change the color also when I change the selected item without a need for a postback. Is it possible to set the class in jquery/javascript ?
Regards, Paul
0
Hi Paul,
You can use the same approach and switch the cases depending on the text of the item. On the client-side, however, you can use the OnClientSelectedIndexChanging event and the following java script in order to change the css classes that you apply:
Kind regards,
Kate
the Telerik team
You can use the same approach and switch the cases depending on the text of the item. On the client-side, however, you can use the OnClientSelectedIndexChanging event and the following java script in order to change the css classes that you apply:
function
OnClientSelectedIndexChanged(sender, args) {
var
itemName = args.get_item().get_text();
//implement different cases depending on the itemName value
//sets a css class by appending the name of the comoboxItem
$telerik.$(
'.rcbInput'
).addClass(
"class"
+ itemName);
}
Kind regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Paul Evers
Top achievements
Rank 2
answered on 04 Feb 2013, 08:43 AM
Hi Kate,
The solution you provided will change all the RadComboboxes on the form.
Only the control that triggered the OnClientSelectedIndexChanged (the sender) should get the class.
Paul
The solution you provided will change all the RadComboboxes on the form.
Only the control that triggered the OnClientSelectedIndexChanged (the sender) should get the class.
Paul
0
Accepted
Hello Paul,
You can use the following line instead:
It finds the RadComboBox by its id and sets the new css class. Here is the markup that I used:
Regards,
Kate
the Telerik team
You can use the following line instead:
$telerik.$(
"#RadComboBox1_Input"
).addClass(
"class"
+ itemName);
It finds the RadComboBox by its id and sets the new css class. Here is the markup that I used:
<
telerik:RadComboBox
ID
=
"RadComboBox1"
runat
=
"server"
OnClientSelectedIndexChanged
=
"OnClientSelectedIndexChanged"
Width
=
"250"
Skin
=
"Default"
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
"Apple"
/>
<
telerik:RadComboBoxItem
Text
=
"Banana"
/>
<
telerik:RadComboBoxItem
Text
=
"Lemon"
/>
<
telerik:RadComboBoxItem
Text
=
"Orange"
/>
<
telerik:RadComboBoxItem
Text
=
"Strawberry"
/>
<
telerik:RadComboBoxItem
Text
=
"Water melon"
/>
</
Items
>
</
telerik:RadComboBox
>
Regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.