Maximize AdvancedDataGrid’s Column Text Space September 21, 2007
Posted by tomgutz in Flex.trackback
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.
Links: AdvancedDataGrid, AdvancedDataGridColumn, AdvancedDataGridHeaderRenderer, AdvancedDataGridSortItemRenderer
I ran into the same issue and saw that a bug got filed in Jira (Adobe’s transparent bug database): http://bugs.adobe.com/jira/browse/FLEXDMV-1243.
But in the mean time I would love to use your workaround/solution.
I’ve noticed that you did not include the source to the all important sr:sortRenderer.
Would you mind posting that as well and perhaps with a tip on how you resolved the display problem?
Thanks, Daniela
Hi Daniela,
Actually all the source codes are there. But i did look at my codes just to make sure that they are actually there. If you would look at the sortRenderer.as file there is a lot of commented codes in there (ooops! sorry i forgot to clean it up), however, all it does is just shrink that UIComponent to zero width. This is why it hides the sort Indicator in the UI.
But you know what? This really sucks since in the latest version of flex 3, which is beta 2. They change the sort renderer, thus have tried it compiling it under that and it seems that it does not really work as expected on that version. Some new design was added in the code as well as in the UI. SO in short The sort space can be still used but whenever you hover over the header it shows the text that im trying to hide.
I guess this is what happens if you try to develop under a beta release thing, in which anything can still happen under the sun. i’ll revisit this problem in a while when its time since its evitable that we customize it for our company’s use.
Thanks for getting back to me and looking into this. Would have been a nice little workaround until the reported bug will get fixed… you could vote for it so that it gets higher priority.
BTW, when I click on the above source link it only shows the CustomAdvancedDatagrid.mxml file and no other file (like the sortRenderer.as file you are referring to).
Yep, it is “fun” to work with beta software. I am also developing with the Flex3 Beta 2 and have had lots of “fun” with the AdvancedDataGrid…
Ooops! you’re right! No kidding I should have uploaded the source files correctly in the first place, sorry about that. Thanks for pointing it out. I have updated the link so you shall be able to download it.
Sure lets vote for it.
You can also use:
sortableColumns=”false” sortExpertMode=”true” as parameters in the
advanceddatagrid.
Then you have the same view as a normal datagrid, so no sort and
no space taken by the sorting stuff.
R,
This is a good input. I modified the code i have but still I still have my own custom renderer to support my other design requirements. Ill upload it when I get a chance.