All the listy components in Flex (List, Datagrid, Tree, etc.) have a protected method called drawRowBackground which is in charge of drawing the background for a given row. You typically use it to color a given row based on some facet of the data the row represents (e.g. red background for rows with a negative bank balance).
With DataGrid, it's easy to use, just subclass DataGrid and override the method, parameterized so you can pass in a function to compute the color for each row based on the row index/data/original color/etc. With List (and since ComboBox uses a List, ComboBox too), it's a bit nastier.
For some reason, List will only call drawRowBackground if the 'alternatingItemColors' style is set for the List. So if you want to color your List rows, you have to supply that style, which you'll likely immediately be overriding.
With ComboBox, you use a ClassFactory for the dropdownFactory to instruct it to use your custom List implementation (that will do row coloring). In this case, however, it's not the List instance that needs the 'alternatingItemColors' style, but the ComboBox. The ComboBox passes all it's style attributes to the List that backs the dropdown when it's created.
Just for reference, here is my subclass of List to allow row coloring. The one for DataGrid is identical, except for the name and the class it's extending:
package views {
import mx.controls.List;
import mx.collections.IList;
import flash.display.Sprite;
public class RowColoringList extends List {
[Bindable]
public var rowColoringFunction:Function;
protected override function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void {
if (rowColoringFunction != null && IList(dataProvider).length > dataIndex) {
color = rowColoringFunction(IList(dataProvider).getItemAt(dataIndex), dataIndex, color);
}
super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}
}
}
[...] Row Backgrounds in Flex Barney wrote: All the listy components in Flex (List, Datagrid, Tree, etc.) have a protected method called [...]
Do you have an example for DataGrid?
The DataGrid extension is exactly the same, just with this line:
public class RowColoringList extends List {
replaced with this one:
public class RowColoringDataGrid extends DataGrid {
Obviously the import line needs to change as well.
[...] List/ComboBox Row Backgrounds in Flex at BarneyBlog [...]
Hi, I need different row colors(not alternating) in a Tree based on some condition. Any idea how to do this?
Amit,
That function gets passed in the index of the current row, both in the grid and in the data provider, so you should be able to use those to figure out what data (in your provider) the row is fronting, and do whatever logic is needed from there. I'm not exactly sure how that would work with a Tree (since the data is hierarchical), but the same idea should work.
Hi,
The thing is that I have the list with a vertical scroll bar…. If, for instance, the second item is "orange", when is scroll down the third item will become orange. If I scroll once more the fourth is "orange", etc…
I want the colour to be attached to the actual ITEM… not to the index shown on screen!.
Can you help please.
Thanks,
Chris.
Christian,
I honestly don't know. I'd imagine it's just a matter of implementing the passed rowColoringFunction to use the right offsets. I haven't done any Flex development in a long; we gave up on the platform and switched to doing everything with JS. Fewer platform-specific problems, far faster development, easier testing, etc.
hi
i created a custom list component class and i override the drawRowBackground method as u mentioned .wen i create object for RowColoringList it cannot call the drawRowBackground method . wen will this method will call. do u hava any sample files
thanks
kandasami raja.c
kandaraja @ gmail . com
kandasami,
The code in the post is the complete sample, aside from replacing with . Do keep in mind that the code is over two years old and Flex has evolved significantly in that time, so it's entirely possible (and probably likely) that it doesn't work with the current framework.
Christian…
in the drawRowBackground…
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void { var newColor:uint; switch(dataIndex) ...use the dataIndex… not the rowIndex
The drawRowBackground method is not called by the List class in Flex unless the style alternatingItemColors style is specified. (The method is called by the drawRowBackgrounds method).
The simplest alternative is to override the drawRowBackgrounds method, duplicating the base functionality but removing the alternatingItemColors style check.