Disabled Item Color Change

[Adam Gross]

I have a RadListBox that I am trying to use to convert an old ASP page.  In my ASP page I was able to use a Select box with optgroup to create headers within the list box.  In this case, I have Headquarters as a non-selecteable bold header.  Then I have sites indented and beneath.  In trying to duplicate the functionality, I can't seem to make it work with RadListBox.  I can't find a way to group items in the listbox, so I am using Disabled for the headers and then trying to use CSS to format.  Overall, I'm almost there, but I can't get the CSS to change the color of the header text.  Since it's disabled, it's grey.  I have tried overriding the CSS and I can make the text larger, smaller,bold, italic, etc, but I can't get it to change color.  For the non-disabled items, I can change the color.  What's going on?  I'm using the Internet Explorer Developer Tools to view the applied CSS and it shows my new color as being applied to the disabled items, but it just won't display properly.

Here's the custom CSS I'm trying.

<style type="text/css">
.RadListBox_Default li.rlbDisabled
{
   color:Black;
   font-weight: bold;
   text-decoration:underline;
   text-indent:0px;
   margin-left:0px;
}
.RadListBox_Default .rlbDisabled span.rlbText
{
   color: Black;
   font-weight: bold;
   text-decoration:underline;
   font-size:10pt;
   text-transform:capitalize;
   font-family:Verdana;
   font-style:italic;
}

.RadListBox_Default li
{
   margin-left:10pt;
}
.RadListBox_Default span.rlbText
{
   font-family:Verdana;
   font-size:10pt;
}


</style>

This is the RadListBox.

<telerik:RadListBox
                runat="server"
                ID="rlbItemList"
                Height="400px"
                Width="350px"
                AllowTransfer="true" AllowReorder="false"
                TransferToID="RadListBoxDestination"
                EnableEmbeddedBaseStylesheet="false"
                EnableEmbeddedSkins="false"
                CssClass="ListBox"
            >
            </telerik:RadListBox>

        </td>
        <td>
            <telerik:RadListBox
                runat="server"
                ID="RadListBoxDestination"
                Height="400px"
                Width="350px"
            />

[Genady Sergeev]

Hello Adam Gross,

In IE, all items adorned with the disabled='disabled' attribute receive grey color and there is way to change that. One has to remove the disabled attribute. Also, text color related properties should be applied to span.rlbText instead of to li.rlbDisabled. This is the html structure of RadListBoxItem:

<li class="rlbItem">
    <span class="rlbText"></span>
</li>

In general, I suggest that you remove the disabled attribute using JavaScript and apply the needed color to the text inside the span. You can remove the attribute easily with jQuery:

var item = $find("RadListBox1").getItem(0);
item.get_element().disabled = "";

Best wishes,
Genady Sergeev
the Telerik team

[Adam Gross]

I need the items to be disabled.  Won't using the code you suggest cause the items to be re-enabled?  If so, that won't really help me.  Is there a way to programmatically create header sections in the RadListBox that can't be selected?

[Genady Sergeev]

Hi Adam Gross,

The easiest way is to use the HeaderTemplate functionality provided by RadListBox. Here is an example:

<telerik:RadListBox ID="rlbAvailable" runat="server">
   <HeaderTemplate>
       <h4>This is header</h2>
   </HeaderTemplate>
</telerik:RadListBox>

The HeaderTemplate property provides an easy way to add a header to a given listbox. FooterTemplate property is also available.

Greetings,
Genady Sergeev
the Telerik team

[Adam Gross]

I was able to get it to work using the first method that you suggested.  This is what I was trying to accomplish:

Site Group 1

Site 1

Site 2

Site 3

Site Group 2

Site 4

Site 5

Site 6

The Site Groups are disabled because I only want users to select individual sites.  Since I need multiple Site Groups (headers), the header template didn't seem like something that would work.