Tomgutz’s Weblog

I have been scouring the web for an article or a topic about how to somehow maximize the Flex’s AdvancedDataGrid columns header text space, but unfortunately, I wasn’t able to find even one article about it, or maybe i wasn’t that thorough or not that lucky to bump into one. Since we all know as a default, the AdvancedDataGrid columns uses an extra 20 pixels on the rightmost of the column header for the sort indicator, however, it is unlike the basic DataGrid which only takes that space when triggered to sorted. I really am not sure how come the guys from Flex did not create the behavior of column headers from the AdvancedDataGrid and basic DataGrid similar. I’m sure there is a reason behind it for better or worse. So basically this posting tells you on how to customize the AdvancedDataGrid column headers to behave like the basic DataGrid

Default AdvancedDatagrid

Custom AdvancedDatagrid

There is one problem though in this sample implementation. On initial Paint or Draw of the Grid, the customization i made has not taken effect. So you need to resize the grid columns of the leftmost table to repaint the headers. Eventually after doing that you’ll see the customization i made. I have solve this actually but for this simple demonstration ill leave it be.

Demo | Source

Links: AdvancedDataGrid, AdvancedDataGridColumn, AdvancedDataGridHeaderRenderer, AdvancedDataGridSortItemRenderer