Custom Row Coloring for Infragistics WebDataGrid

The Infragistics WebDataGrid provides some great AJAX-data presentation features for a Web Grid.  However, if you want to do custom coloring of rows based on criteria in your code, you will have to do a bit of overriding to compensate for the application of the ig_webdatagrid.css that is used and takes precedence over anything that you set in the code.

Part I
Setup your grid and bind to data as needed.
Setup your InitializeRow event.
Add the following code (for example) to set the CssStyle:

//Setup the InitializeRow event to set the CssClass when a certain condition is met.  This will be applied to the TR element.
protected void grdMyGrid_InitializeRow(object sender, Infragistics.Web.UI.GridControls.RowEventArgs e)
{
   if (e.Row.Items.GetValue(1).ToString().ToUpper() == "TURN ME YELLOW")
   {
      e.Row.CssClass = "TURN_ME_YELLOW";        }
}

Then setup your CSS.  The specific CSS entry you need to override changes based on the CSS template you are using.  Check the section later in this article for how to do this.  Assume, for example, that you are using the Office2007Black template.

< style type="text/css" >

TBODY.igg_Office2007BlackItem > TR.TURN_ME_YELLOW TD
{
   backkground-color: Yellow;
   color: Black;
}
< /style>
</>

Part II
Determining the exact CSS element to override.  This is not straight forward...but maybe I can lead you down a path where you can resolve your issue. 

• Run your application and hit F12 in your Internet Explorer browser.  This will bring up the Developer window.
• Click on the CSS tab.
• Select the CSS for the grid (ig_webdatagrid.css).  There will be other stylesheets...but they are not needed at this time.
• Once you have the style sheet selected, setup your browser and developer window side-by-side.  This will let you see the changes you make to determine the exact item.
• Find the TBODY element with the corresponding TR item.  De-select it to see if that gives you the desired effect.  If it does, then you just need to single-click on the text, copy the text, and paste that in your style section.  You will need everything, including the TD

Credit
This article is due largely in part to the video tutorial created by craigshoemaker on the Infragistics website.