Friday, June 28, 2013

Header Alignment Issue with ASP.NET GridView Control

Without any styling a GridView control's header will display the text in the center of the column.  If you want the header text to be aligned to the left of the column, it can be tricky and not very intuitive to accomplish this.

There are several places (markup not code-behind) in the grid where you can specify a CSS class to apply to the header.  The attribute is called HeaderStyle-CssClass.  This attribute is applicable to the asp:GridView node, or the individual Column nodes (i.e. asp:TemplateField, asp:BoundField, etc.).  There is also a HeaderStyle node which as a CssClass attribute that would mean the same thing.  However, any alignment styling will not work unless the HeaderStyle-CssClass attribute is set on the individual Column nodes.  So, you have to specify the header's CSS Class for each column.  To me this is counter-intuitive, but appears to be the only way to get a header to align a certain way.

No comments:

Post a Comment