Styling Apache DataGrid in flex 4.15

Question

I would like to know, how I can change the background color of an datagrid item! I use external CSS and with flex 4.6 I use:

s|ItemRenderer
{
  contentBackgroundColor: #FF0000;
}

But I have to upgrade to apache flex 4.15 and it doesn't work anymore... I can't find which component I suppose to style. In the documentation I can't find the list of styles available T_T.

If you have a link or answer thx!

Is it MX or Spark Datagrid ? Did you try GridItemRenderer instead of ItemRenderer? — Nemi

essalprod essalprod · Accepted Answer · 2016-09-20T10:29:03

In the documentation of adobe Flex it's said:

An item renderer is associated with a column of the DataGrid control. The item renderer then controls the appearance of each cell in the column. However, each item renderer has access to the data item for an entire row of the DataGrid control. Use the data property of the item renderer to access the data item.

Try to accomplish that by using ItemRenderer for all your columns you can do that in MXML manner or by mixing MXL with Action script code like applying the style for a known column:

<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
    <mx:DataGridColumn headerText="Title" dataField="title">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox paddingLeft="2">
                    <mx:Script>
                    <![CDATA[
                        override public function set data( value:Object ) : void {
                            super.data = value;
                            var today:Number = (new Date()).time;
                            var pubDate:Number = Date.parse(data.date);
                            if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
                            else setStyle("backgroundColor",0xffffff);
                        }
                    ]]>
                    </mx:Script>
                    <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
                    <mx:Text width="100%" text="{data.title}" />
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>
</mx:columns>

or in separated action script class by excluding the content of the script tag mentioned to action script class extending your column's type and overriding the set data method like:

public class CheckBoxHeaderRenderer extends CheckBox
{
    override public function set data(value:Object):void
{
    _data = value as CheckBoxHeaderColumn;
    selected = _data.selected;
    //type your condition here using the property of your dataField
    if(data.property=="value"){
    this.styleName="yourClassCSSName"
    }
}

and your class CSS will be like:

    .yourClassCSSName{
contentBackgroundColor: #FF0000;
}

for more: Understanding Flex itemRenderers

Creating item renderers and item editors for the Spark DataGrid control

Styling Apache DataGrid in flex 4.15

1 Answers