CSS with ASP.NET
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.
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.
posted by balachandar muruganantham at
9:02 PM
