Add alpha transparency to your DataGrid using StyleableDataGrid
Recently, I ran into another issue with DataGrids. I received a design comp from one of our designers who wanted alpha transparency in a DataGrid for alternating rows, the header, and highlight/selection. Basically, he wanted something like this (I added a red gradient and vertical stripes on the background to make the alpha more apparent):
After a quick look through the styles and properties of Flex 3’s DataGrid, I discovered that I wouldn’t be able to do these three requests unless I (once again) subclassed the DataGrid to add these behaviors.
In this component, I added the following styles:
rollOverAlpha
selectionAlpha
alternatingItemAlphas (complements alternatingItemColors)
headerAlphas
headerSeparator (boolean -- draws the column separator on the header)
Note that the alternatingItemAlphas will not appear to work unless DataGrid’s backgroundAlpha style is set to zero.
To see an example with View Source enabled, click here.
[...] This post was Twitted by adobeInc [...]
Wow, that’s way better than my way! I just made all custom itemRenderers, set their background alpha’s, and then set the main datagrid’s background-alpha to 0. Then, each listData or data setter had to figure out what index it’s data was to know if the row was even or odd.
…so yeah, great job!
Jester XL said He made all custom Renderers.
How we can made this.
I use an imageRenderer as itemRenderer for a column, and the renderer doesn’t emptied all the cell.
I have 5 pixel of cell background at the bottom of itemRenderer.
Is it possible to correct this little bug.
Thanks for this, exactly what I needed!
great! I’ll use it!
thanks for sharing!