ASP.NET: How to set the css class of a Control during DataBind?


Tags: asp.net,css

Problem :

A table row is generated using an asp:Repeater:

<asp:repeater ID="announcementsRepeater" OnItemDataBound="announcementsRepeater_ItemDataBound" runat="Server">
   <itemtemplate>
      <tr id="announcementRow" class="announcementItem" runat="server">...</tr>
   </itemtemplate>
</asp:repeater>

Now in the data-bind i want to mark "unread" announcements with a different css class, so that the web-guy can perform whatever styling he wants to differentiate between read and unread announcements:

protected void announcementsRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
   if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem)
      return;

   // get the associated data item
   Announcement announcement = (Announcement)e.Item.DataItem;

   WebControl row = (WebControl)e.Item.FindControl("announcementRow");
      if (row != null)
         row.CssClass = row.CssClass + " announcementItemUnread";
}

except the cast fails at runtime:

System.InvalidCastException occurred
  Message="Unable to cast object of type 'System.Web.UI.HtmlControls.HtmlTableRow' to type 'System.Web.UI.WebControls.WebControl'."

It turns out that HtmlTableRow has a different parent heirarchy than WebControl:

HtmlTableRow
   : HtmlContainerControl
      : HtmlControl
         : System.Web.UI.Control

which is ultimately where WebControl comes from

WebControl
   : System.Web.UI.Control

So i changed the code to try to use a System.Web.UI.Control instead:

Control row = (Control)e.Item.FindControl("announcementRow");
if (row != null)
   row.CssClass = row.CssClass + " announcementItemUnread";

But Control doesn't contain a definition for CssClass:

'System.Web.UI.Control' does not contain a definition for 'CssClass'    

so how do i set the css class name for a <TR> element during DataBind?



Solution :

   HtmlControl htmlRow = (HtmlControl)row; 
   htmlRow.Attributes["class"] = htmlRow.Attributes["class"] + " announcementItemUnread";

    CSS Howto..

    How to make jQuery slide open and close with CSS class

    QuickSand Script not showing correctly in IE 7

    how to toggle image in HTML-CSS? [duplicate]

    How to make a pure css based dropdown menu?

    How can a

    How to color the first word using CSS

    How to align vertical text horizontally center?

    How to add javascript to an image from the content_wrapper in the css stylesheet

    How to access the set qt stylesheet properties (css like grammar), or is there an css to xml converter?

    How can I get this toggled drop down menu to be open by default - rather than having to have someone click it to initialize it?

    How to manage text breaks in span using js, css or anything else

    How to make/render a font-awesome font “thin”? [duplicate]

    How to get a background image to work in CSS and HTML?

    How to vertical-align text on this input box for IE

    How to apply inline and/or external CSS loaded dynamically with jQuery

    How to make button that changes grid dimensions using JS?

    How to display a dynamic rating based on css and the value from PHP? [closed]

    How to make triangle shape in before a div in pure css?

    How can I apply some css for all readonly elements on focus in IE8?

    How to fix the Height for this area?

    How can I align two icons on my webpage next to each other?

    How to rotate text and position it properly? (CSS, HTML)

    How to set the horizontal menu to be center without setting the specific width

    How can I use Modernizr to get border-radius working in IE8?

    How to set background-image to take remaining section of the page in semantic-ui

    How to place object in relation to window browser in css/html?

    How to get a JavaFX XYchart to work with user defined CSS?

    How to get inner and outer width to a single element?

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How do i enable hover effect on an image if the text before it is hovered?