Different row styling in datagrid FLEX

Question

I'm trying to change the font color of a row in a datagrid if a certain word is found in a datafield. Is there a simple, inline way to do this?

Thanks

Answer 1

While rekaszeru's approach is certainly valid, I think putting this logic in item renderer is more logical.
You can create custom item renderer and make setStyle("color", "...") there based on data. Just don't forget to clear color when word is not found, because renderer are reused and will contain old values if not overwritten.

Answer 2

You can override your DataGrid's drawRowBackground method, and check whether it needs custom background or not.
If so, pass the new background color to the super call of this method:

protected override function drawRowBackground(s:Sprite, rowIndex:int, 
    y:Number, height:Number, color:uint, dataIndex:int):void
{
    if ((dataProvider[dataIndex] as String).indexOf(someWord) >= 0)
        color = yourCustomColor;
    super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}

where someWord is the word you are searching for, and yourCustomColor is the uint representing the new background color, eg:

var yourCustomColor: uint = 0xff0000;

Answer 3

You can try using the following code.Couple of points to note:

1) Use this approach if you are displaying simple text in your datagrid(Well,you can do this for other type of renderes too,but then you will have to write similar piece of code in other renderers too).

2) In this approach,basically we are recreating the item renderers when we say 'Highlight'.So this can cause some performance degradation,I feel.If you are using simple item renderers,I dont think this will make much impact on the perfomance.

Main Application mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600"
                creationComplete="application1_creationCompleteHandler(event)">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private var rendererFactory:ClassFactory;

            protected function btn_clickHandler(event:MouseEvent):void
            {
                setFilterWordInRenderer();
            }


            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                setFilterWordInRenderer();
            }

            private function setFilterWordInRenderer():void
            {
                if(!rendererFactory)
                    rendererFactory =  new ClassFactory(CustomItemRenderer)

                //Data for the renderer.The word to check.
                rendererFactory.properties = {filterWord:textInput.text};
                //Only set the renderers to the columns where you want this highlighting to be done.                
                col1.itemRenderer = rendererFactory;
                col2.itemRenderer = rendererFactory;
            }

        ]]>
    </mx:Script>

    <mx:TextInput id="textInput"/>
    <mx:Button id="btn" label="Highlight" click="btn_clickHandler(event)"/>
    <mx:DataGrid id="dtg">
        <mx:dataProvider>
            <mx:XMLList id="datXML" xmlns="">
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
                <value id='test1'>abc</value>
                <value id='test2'>sadad</value>
                <value id='23'>ytuyt</value>
                <value id='24'>uytuty</value>
                <value id='62'>erewewwer</value>
                <value id='72'>tefcvsrwert</value>
                <value id='28'>uiiyui</value>
                <value id='82'>tryry</value>
                <value id='28'>iouoo</value>
            </mx:XMLList>
        </mx:dataProvider>
        <mx:columns>
            <mx:DataGridColumn id="col1" headerText="Col1" dataField="@id"/>
            <mx:DataGridColumn id="col2" headerText="Col2" dataField="*"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

Contents of CustomItemRenderer.mxml(assumed to be in the same folder as the above mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml"
          color="{text.indexOf(_filterWord,0) != -1?0xFF0000:0x000000}">
    <mx:Script>
        <![CDATA[
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridListData;

            //The word to check,for font color changing.
            [Bindable]
            private var _filterWord:String;

            public function set filterWord(value:String):void
            {
                if(value!='')
                    _filterWord = value;
                else
                    _filterWord = null;
            }

            override public function set data(value:Object):void 
            {
                if(!value)
                    return;
                super.data = value;
                //Set the label text,using listdata and datafield to make the item renderer as generic as possible.
                text = data[DataGridListData(listData).dataField];
            }

        ]]>
    </mx:Script>
</mx:Label>

Hope that helps.In the meantime I will also look if you can achieve this in a more simple way.