Infragistics WebDataGrid control offers very flexible styling option – you can set font, color, size of almost any element from column to individual cell. Here is an example of basic markup that sets CSS classes of overall grid control, grid header, grid odd row and grid even row:

<ig:WebDataGrid ID="xMyGrid" runat="server"
   CssClass = "GridStyle"
   HeaderCaptionCssClass = "GridHeaderCellStyle"
   ItemCssClass = "GridCellStyle"
   AltItemCssClass = "GridAltCellStyle" 
>

And corresponding example of CSS class for even row:

tbody > tr.GridAltCellStyle > td
{
   font-size:11px;
   font-weight:normal;
   font-family:Verdana, Geneva, sans-serif;
   height:20px;
   padding: 2px 2px 2px 2px;
   border-bottom: none;
   border-right: 1px solid rgb(190,198,178);
   background-color:rgb(240,240,240);
}

(For a complete grid styling reference take a look at this styling guide)

And it all works fine, your grid renders so beautifully, Picasso would cry. But only on initial page load. And here comes dreadful postback. (Or partial postback if your grid is inside of UpdatePanel). Suddenly all your wonderful styles are lost, the grid resets to Default style and looks like a mess.

This happens because on postback grid’s default styles take over. Oh, reference to your styles is still there, but they get overridden. This doesn’t happen on initial page load, only on postback. The solution to this isn’t pretty, but it works. Just add !important modifier to your style elements:

tbody > tr.GridAltCellStyle > td
{
   font-size:11px !important;
   font-weight:normal !important;
   font-family:Verdana, Geneva, sans-serif !important;
   height:20px !important;
   padding: 2px 2px 2px 2px !important;
   border-bottom: none !important;
   border-right: 1px solid rgb(190,198,178) !important;
   background-color:rgb(240,240,240) !important;
}

This will prevent your styles from being overridden and they will persist across the postbacks.

---

UPDATE 8/20/2012: Turned out (at least in this particular case) grid losing styles was caused by usage of <% =  ... %> notation in grid’s pager user control. I needed a JavaScript source file to load from correct location no matter witch folder/subfolder control with pager is placed in, so I used

<script type="text/javascript" 
   src="<%= ResolveClientUrl("~/ScriptFolder/ScriptLibrary.js")%>">
</script>

This was causing a few issues among them grid losing style. When I replaced it with this piece:

<asp:ScriptManagerProxy ID="smManager1" runat="server">
   <Scripts>
      <asp:ScriptReference Path="~/ScriptFolder/ScriptLibrary.js" />
   </Scripts>
</asp:ScriptManagerProxy>

The issues went away including lost styles, I could remove the !important modifier from my CSS and the grid kept all the styles on the postback.