The important thing to notice here is that the headers are now styled differently than the column content. If the same styles were set on the column objects then the header as well as column content would have got same styles. headerStyleName allows customizing only the headers.
The headerStyleName is available on the control and the column object. Hence you can set the control.headerStyleName to customize all the headers and use the column.headerStyleName to customize individual headers.
A sample mxml file.
Tuesday, July 31, 2007
Customizing headers in DG/ADG
Customizing headers in DataGrid and AdvancedDataGrid (DG/ADG) is very easy. Just point the headerStyleName property available on these controls to any style declaration you want. The following image shows one such example where the header text is colored in blue and red. The second column text is center aligned.
The important thing to notice here is that the headers are now styled differently than the column content. If the same styles were set on the column objects then the header as well as column content would have got same styles. headerStyleName allows customizing only the headers.
The headerStyleName is available on the control and the column object. Hence you can set the control.headerStyleName to customize all the headers and use the column.headerStyleName to customize individual headers.
A sample mxml file.
The important thing to notice here is that the headers are now styled differently than the column content. If the same styles were set on the column objects then the header as well as column content would have got same styles. headerStyleName allows customizing only the headers.
The headerStyleName is available on the control and the column object. Hence you can set the control.headerStyleName to customize all the headers and use the column.headerStyleName to customize individual headers.
A sample mxml file.
Subscribe to:
Post Comments (Atom)
10 comments:
Nice article!
But how would you align the column to the right without affecting the header.
Thanks.
Text align to the right in the column is easily done by setting AdvancedDataGridColumn.textAlign style to "right". This won't affect the header text alignment because it has its own styles now.
I've tried it in DataGrid but it seems not working for me. I've put headerStyleName to the headers and it's fine, but when I add textAlign = "right", header are affected by it. Is there something I missed here.
Thanks. :-D
In the current release it is not working as expected due to a bug http://bugs.adobe.com/jira/browse/SDK-10900.
By making a small fix to the DataGridColumn.addStyleToProtoChainfunction we can get a local fix.
The fix can be downloaded
here
Does the fix above work with Flex 2.0.1?
If yes, where would I place the .as file?
Thanks.
The file may not work with 2.0.1
Here is the one which would work with 2.0.1. It needs to be renamed before use.
The file can be placed in a relative directory mx/controls/dataGridClasses w.r.t to the project.
thanks for your valuable info.
I have one task . I have to change the border color for one single column header .
how do i change this??
Post a Comment