This is a migrated thread and some comments may be shown as answers.

backgroundcolor dependent of selected value

5 Answers 255 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
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:
  • New
  • Selected
  • Not selected
  • Mandatory
  • Rejected

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

Sort by
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#:
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
0
Kate
Telerik team
answered on 01 Feb 2013, 04:26 PM
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:
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
0
Accepted
Kate
Telerik team
answered on 07 Feb 2013, 08:59 AM
Hello Paul,

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.
Tags
ComboBox
Asked by
Paul Evers
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Paul Evers
Top achievements
Rank 2
Kate
Telerik team
Share this question
or