Customizing Apperance of Inactive Items

4 posts, 0 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 06 Nov 2011 Link to this post

    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
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 06 Nov 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 16 Nov 2011 Link to this post

    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
  5. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 16 Nov 2011 Link to this post

    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.
Back to Top