DataGrid Sort Column CSS

If you’ve tries to set CSS styles for your DataGrids, you may have run into a problem with sort columns. Sort columns contain DataGridLinkButtons which render as HTML anchor tags. Since these controls are contained within the DataGrid header itself, setting the CssClass for the header won’t get the style applied to the anchors. The easy solution is to set the styles directly in the grid at design time, but that means changing the aspx/ascx should a style change be required. It would be better to be able to set the styles in CSS and it can be done with a little ingenuity.

The trick is to use what’s called Contextual Selectors and Pseudo-Classes. I’ll show a sample that sets a DataGrid’s headers to a gray background with white text. The HeaderStyle CssClass of the grid has been set to TaskGrid_Head. Here’s the sample and then I’ll explain it:

..TaskGrid_Head, TaskGrid_Head td, .TaskGrid_Head a, .TaskGrid_Head a:link, .TaskGrid_Head a:visited, .TaskGrid_Head a:hover{ font-weight: bold; font-size: 10pt; color: #ffffff; background-color: #c0c0c0;}

What this does is to tell all td’s and anchors who are contained within elements with a CSS class of TaskGrid_Head to take on the style as defined. The TaskGrid_Head td is an example of such a Contextual Selector.

One more item: To get all the states of an anchor to behave, use the pseudo-classes a:link, a:hover, and a:visited.


One thought on “CSS with ASP.NET

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s