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.

10 comments:

xxx said...

Nice article!

But how would you align the column to the right without affecting the header.

Sreenivas said...

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.

xxx said...

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

Sreenivas said...

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.

Sreenivas said...

The fix can be downloaded

here

Unknown said...
This comment has been removed by the author.
Unknown said...

Does the fix above work with Flex 2.0.1?

If yes, where would I place the .as file?

Thanks.

Sreenivas said...

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.

Unknown said...
This comment has been removed by the author.
Unknown said...

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??