CodesOfMyLife
Customizing the header of datagrid in Flex 4.5 is really easy. We just need to copy the codes from ‘DefaultGridHeaderRenderer’ into a custom renderer class, tweak a few fields and voila – we can get a customizable datagrid like the application below (right click on application for source). In this application, one can change the header text alignment, the background color of header and also hide the header. The header text here by default is 2 lines. We can customize it easily to build a multiline header datagrid.
If you enjoyed this article, please consider sharing it!
Hi Vinay,
with great pleasure I have found a lot of very helpfull things around the Spark Datagrid on your Website!
Something I miss is in the spark datagrid-/gridcolumn- component is the click-event on the column header. Do you have an Idea how to fix that gap?
Thank you and best wishes
Uwe
I am really glad that you liked the posts. Regarding click-event for column header, a quick fix might be to add an eventListener on columnHeaderGroup of your spark datagrid and disable sorting by setting “sortableColumns” property on your datagrid to false.
yourDataGrid.sortableColumns = false;
yourDataGrid.columnHeaderGroup.addEventListener(MouseEvent.CLICK, headerClickListener);
……………..
//Header click event handler
private function headerClickListener(event:MouseEvent):void {
Alert.show(“Do Something”);
}
There might be better solutions though. I hope it helps.
Hi Vinay,
that was exactly what i need!
Please allow me a last question.
How can I detect the columnindex or headertext of the clicked current columnheader?
Thank you very much – you have saved me a lot of time!!
Greetings from cologne
Uwe
One possible solution for that would be to handle the GRID_CLICK event instead of mouse click event.
sparkDG.columnHeaderGroup.addEventListener(GridEvent.GRID_CLICK, headerClickListener);.............
private function headerClickListener(event:GridEvent):void {
var target:Object = event.target;
var column:GridColumn = event.column;
Alert.show(column.headerText);
}
……
You can access columnIndex by column.columnIndex. I hope that solves your problem.
Vinay
Hi Vinay,
you are my Flex “Hero”;-)
I have thought that GridEvent is only for cells and not for headers.
Now I can complete my App. Thanks again!
Greetings from cologne
Uwe
haha…i am glad it was helpful.
Vinay,
I have a datagrid with 8 col. Is it possible for user to customize the col. i mean to say user want to see only 3 col. out of 5.