Solution: WebDataGrid loses styles after postback

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.