Change background color of specific rows where value in a cell matches the string “sample”.
<fx:Script> <![CDATA[ import mx.core.ClassFactory; import spark.skins.spark.DefaultGridItemRenderer; private function test_itemRendererFunction(item:Object, column:GridColumn):ClassFactory { if (item == null) { return new ClassFactory(DefaultGridItemRenderer); } else { // if(item.d1=="sample") if(item[column.dataField]=="sample") { return new ClassFactory(GrayGridItemRenderer); } else { return new ClassFactory(DefaultGridItemRenderer); } } } ]]> </fx:Script> <s:DataGrid> <s:columns> <s:ArrayList> <s:GridColumn dataField="d1" headerText="h1" itemRendererFunction="test_itemRendererFunction"></s:GridColumn> <s:GridColumn dataField="d2" headerText="h2" itemRendererFunction="test_itemRendererFunction"></s:GridColumn> <s:GridColumn dataField="d3" headerText="h3" itemRendererFunction="test_itemRendererFunction"></s:GridColumn> </s:ArrayList> </s:columns> </s:DataGrid>
GrayGridItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?> <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true"> <fx:Script> <![CDATA[ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); if (data && data[column.dataField]!=''){ lblData.text = data[column.dataField]; } } ]]> </fx:Script> <s:Rect top="0" bottom="0" right="0" left="0"> <s:fill> <s:SolidColor color="#E0E0E0" alpha="0.5"/> </s:fill> </s:Rect> <s:Label id="lblData" top="7" left="7" bottom="5" color="0x000000" alpha="0.5"/> </s:GridItemRenderer>