Customizing Apperance of Inactive Items

[Robert]

As the enclosed screenshot shows, I've implemented the RadListBox in order to show listbox items with more than one line of text.  I'm making good progress with it but am stuck on one thing.  Simply put, how do I effect styling on items that are not being hovered or clicked on?

To accomplish what I've done so far I implemented a custom 'ItemTemplate" as follows:

          <telerik:RadListBox ID="radListBoxStopes" runat="server" Width="100%" Height="100%" OnItemCreated="radListBoxStopes_ItemCreated"><br>            <ItemTemplate><br>              <asp:Panel runat="server" style="padding-bottom:0px; border: solid 1px black"><br>                <asp:Label ID="labelStope" runat="server" Text='<%# Eval("Description") %>' CssClass="muckListPrimary" /><br /><br>                <asp:Label ID="labelUnits" runat="server" Text='<%# Eval("Units", "{0:0 units}") %>' CssClass="muckListSecondary" /><br>                <asp:HiddenField ID="hidFieldMaterial" runat="server" Value='<%# Eval("Material").ToString() %>' /><br>              </asp:Panel><br>            </ItemTemplate><br>          </telerik:RadListBox>

The problem with this is that the border around each item actually shows around the Panel inside the item, not the item itself.

In my CSS code I added this code:

<br>.rlbActive <br>{<br>  background: #b3d4f5 !important;<br>  border: 1px solid blue !important;<br>}<br><br>.rlbHovered <br>{<br>  background: #ffff80 !important;<br>  border: 1px solid red !important;<br>}

But, so far, I have not been able to figure out how to identify the inactive items.

Any ideas?

Robert

[Jayesh Goyani]

Hello,

<style type="text/css">
  .RadListBox .rlbDisabled
       {
         background-color: Red !important;
       }
   </style>

<telerik:RadListBox ID="RadListBox1" runat="server">
          <Items>
              <telerik:RadListBoxItem Text="1" Value="1"  />
              <telerik:RadListBoxItem Text="2" Value="2" Enabled="false" />
              <telerik:RadListBoxItem Text="3" Value="3" />
          </Items>
      </telerik:RadListBox>

Thanks,
Jayesh Goyani

[Robert]

Jayesh,

Sorry, but your suggested CSS addition had no effect on the appearance of the RadListBox in my app.

First I tried it your way exactly:

 .RadListBox .rlbDisabled

  {

background-color: Red !important;  

  }

Nothing changed.  So then I tried this shortened format:

 .rlbDisabled

  {


background-color: Red !important;  

  }

But still, nothing. :-(

Might anyone else have any ideas?

Robert

[Robert]

Jayesh's suggestion inspired me to keep on looking for a solution on my own.  I finally came up with one:

.rlbItem
{
  border: 1px solid #8c8c8c;
}


".rlbItem" appears to be the correct element to identify the individual non-selected listbox items.