Change DataGrid cell background with an itemRenderer
This is one of the most common questions that I’ve seen in various forums with regards to itemRenderers…. “How do I change the background color of my DataGrid cell depending on my data?“. As usual, the answer is to use a custom itemRenderer. In the following example, I am using the same itemRenderer for 2 of the 3 columns in the DataGrid. The itemRenderer checks if the data displayed in the cell is over the value 15, if so, it turns the background RED.
Demo: datagrid_reusable_itemrenderer.swf
Sample Code: datagrid_reusable_itemrenderer.mxml, BackgroundComp.as, airlines.xml
By default, a DataGridItemRenderer does not have a background fill. Therefore, there isn’t a simple style to set on a renderer to make the background some color. Instead, we need to draw our own fill for the renderer in a custom updateDisplayList function. In our renderer, we use this code:
| override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight);var g:Graphics = graphics; g.clear(); var grid1:DataGrid = DataGrid(DataGridListData(listData).owner); if (grid1.isItemSelected(data) || grid1.isItemHighlighted(data)) return; if (data[DataGridListData(listData).dataField] > 15) { g.beginFill(0xCC0033); g.drawRect(0, 0, unscaledWidth, unscaledHeight); g.endFill(); } } |
this doesnt seem to work when setting the itemRenderer via ActionAcript
found the answer . . .
should use:
myGrid.itemRenderer = new ClassFactory(BackgroundComp);
Yup. The itemRenderer and itemEditor properties are of type IFactory. When you set these properties in MXML, the MXML compiler automatically casts the property value to the type ClassFactory, a class that implements the IFactory interface.
Can you make the background color flash??
d, where did you place the below line?
nodes.itemRenderer = new ClassFactory(ChangeBGColor);
ef,
You can set an itemRenderer at runtime anywhere in your code. For example, you might set it on the initialize event of your DataGrid or List.
There are a bunch of examples in the Adobe Developer’s Guide that can be found here:
http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part2_DevApps.html
Look under the subject: Flex 2 Developer’s Guide ->Customizing The User Interface -> Using Item Renderers and Item Editors -> Creating an item renderer and item editor -> Setting the itemRenderer or itemEditor property in ActionScript
There is an example there of just what you want.
Thanks for the response and the references Joan.
Of course I thought this is a working sample, but taking it to debugger shows that listData is null.
I just could not figure out why clicking your datagrid_reusable_itemrenderer.swf does work, but when I copy your example to my environment it does not. Is there a difference between your generated swf file and the mxml/as files?
Thanks,
ef
No difference, I think. I just downloaded the files, created a new Flex project and debugged. It seemed to work for me just fine. Make sure you grab the data file too since the example uses an HTTPService to load the xml as data for the DataGrid.
Thanks Joan. My error. Worked like a charm.
ef
Hello all, I am trying to do something similar to this, except I want to change the value of a whole row based on the value of one column. Is there a way to do that?
Thanks for this wonderful example. Unfortunately your implementation also overrides the auto-resizing of a cell’s height should the data take up more than the default space of a cell. I’ve tried a number of ways to overcome this to no avail. Do you have any insights as to how to regain the ability to expand the height of each cell (more accurately, each row)? Thank you again.
That was a life-saver! I thought this was going to be nigh impossible to do! Thanks!!!!
Note, a similar solution (for font-color or fontColor) is posted by Peter at:
http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/
Just for the info:
The gaps, which are appearing between rows, are coming from paddingTop and paddingBottom styles of ListBase (though they are not used in ListBase directly, but in DataGridBase)
Found that if you offset the “drawRect()” a little the gaps disappear. Don’t know if this works for all styles and settings, but it worked form me no matter how high I set the rows to be.
g.beginFill(color);
g.drawRect(0, -2, unscaledWidth, unscaledHeight+4);
g.endFill();
Tried different values and these worked the best.
hi..
i want fill color based on column and row index value.. how can i doing? Pls help..
Instead of comparing the data value with 15 If i want to do comparison of two column value and set the row value red if column1 value is less than column2 value then how can i do?
hi !
i don’t understand wgy you use a drawning to just change the background with itemrender ?
if i was you, i will create a itemrenderer based on a Vbox, includind a Label. And change the backgroundcolor property of the vox !
the result is the same and easier, isn’t it ?
@Michael, if you will only have a couple of itemRenderers in your List or DataGrid and are not concerned with performance, then, using one of the containers to create a background for an itemRenderer is fine. However, the Flex containers like VBox, Canvas etc. have a lot more heavyweight functionality than you need. Therefore basing your itemRenderer off on a component like Label is lighter (but, yes, a little more work). You will start to see a lag in scrolling if you use a container as itemRenderer when you start having many more rows of visible data.