backgroundcolor dependent of selected value

6 posts, 1 answers
  1. Paul Evers
    Paul Evers avatar
    52 posts
    Member since:
    Oct 2011

    Posted 30 Jan 2013 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Jan 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul Evers
    Paul Evers avatar
    52 posts
    Member since:
    Oct 2011

    Posted 01 Feb 2013 Link to this post

    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
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 01 Feb 2013 Link to this post

    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.
  6. Paul Evers
    Paul Evers avatar
    52 posts
    Member since:
    Oct 2011

    Posted 04 Feb 2013 Link to this post

    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
  7. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 07 Feb 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017