Disabled Item Color Change

5 posts, 0 answers
  1. Adam Gross
    Adam Gross avatar
    10 posts
    Member since:
    Dec 2009

    Posted 15 Sep 2010 Link to this post

    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" 
                />
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 17 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam Gross
    Adam Gross avatar
    10 posts
    Member since:
    Dec 2009

    Posted 17 Sep 2010 Link to this post

    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?
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 22 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Adam Gross
    Adam Gross avatar
    10 posts
    Member since:
    Dec 2009

    Posted 22 Sep 2010 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017