Change background of specific items

2 posts, 0 answers
  1. Oscar
    Oscar avatar
    16 posts
    Member since:
    Sep 2013

    Posted 08 Aug 2014 Link to this post

    Hi

    I was looking for a way that allow me to change the background color of certain elements. For example, my dropdownlist is showing the name of Users, but I would like to present with a different background those Users that are inactive. With regular asp.net dropdownlist I was able to do this on DataBound method. Is it possible to do something similar with RadDropDownList?

    Background color is for the moment my requirement, but of course an answer that allow me to change any css attribute would be even better (font size, color, style, etc).

    Thanks in advance of your support
    Regards!

    Oscar Ramirez
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 11 Aug 2014 in reply to Oscar Link to this post

    Hi Oscar,

    Below is the sample code snippet to achieve your scenario. I have set one Boolean value for the Active Users and set it as a DataValueField of RadDropDownList. In ItemDataBound event based on the value I am setting the Color and Font-size of a User in the list.

    ASPX:
    <telerik:RadDropDownList ID="rddlTestDemo" DataSourceID="sqldsUsers" DataTextField="UserName"
        DataValueField="Active" runat="server" OnItemDataBound="rddlTestDemo_ItemDataBound">
    </telerik:RadDropDownList>

    C#:
    protected void rddlTestDemo_ItemDataBound(object sender, Telerik.Web.UI.DropDownListItemEventArgs e)
    {
        if (e.Item.Value == "False")
        {
            //inactive user
            e.Item.CssClass = "inactive-user";
        }
        else
        {
            //active user
            e.Item.CssClass = "active-user";
        }
    }

    CSS:
    <style type="text/css">
        .inactive-user
        {
            color :Red !important;
            font-size : medium !important;
        }
        .active-user
        {
            color:Green !important;
            font-size : large !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top