change color row in datagrid

Question

I have a script that already meets me but would like to send warning signals to my client that something is wrong I was able to change the line color to red I'm working

this can happen in diversar lines and not in sequence. How can I apply this setting?

Below script:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
    import mx.controls.Alert;
    import mx.controls.TextInput;
    import mx.events.DataGridEvent;
    import mx.events.DataGridEventReason;

    [Bindable]
    var Acumula:int = 0;

    protected function checkInput(event:DataGridEvent):void
    {


        if (event.reason == DataGridEventReason.NEW_ROW || event.reason == DataGridEventReason.NEW_COLUMN)
        {
            var editor:TextInput = (event.currentTarget as DataGrid).itemEditorInstance as TextInput;
            var text:String = editor.text;
            var myEditor:TextInput =  TextInput(event.currentTarget.itemEditorInstance);


            Acumula += int(myEditor.text);
            if(int(Acumula) > int(event.itemRenderer.data.score)) 
                {                           
                    Acumula = 0;

                    event.preventDefault();

                    Alert.show(text + "ULTRAPASSOU!");

                    return;
                }

        }
    }

]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
    <mx:Array>
        <mx:Object label="Student A" score="85"/>
        <mx:Object label="Student B" score="48"/>
        <mx:Object label="Student C" score="71"/>
        <mx:Object label="Student D" score="88"/>
        <mx:Object label="Student E" score="24"/>
        <mx:Object label="Student F" score="64"/>
        <mx:Object label="Student G" score="76"/>
        <mx:Object label="Student H" score="76"/>
        <mx:Object label="Student I" score="93"/>
        <mx:Object label="Student J" score="88"/>
        <mx:Object label="Student K" score="48"/>
        <mx:Object label="Student L" score="76"/>
    </mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid x="10" y="28" dataProvider="{arrColl}" editable="true" itemEditEnd="checkInput(event)">
<mx:columns>
    <mx:DataGridColumn headerText="Column 1"  dataField="label" editable="false"/>
    <mx:DataGridColumn headerText="Column 2"  dataField="score" editable="false"/>

    <mx:DataGridColumn headerText="Column 3"  editable="true" dataField="col1">
        <mx:itemEditor>
            <mx:Component>
                <mx:TextInput restrict="0-9"/>
            </mx:Component>
        </mx:itemEditor> 
    </mx:DataGridColumn>

    <mx:DataGridColumn headerText="Column 4"  editable="true" dataField="col2">
        <mx:itemEditor>
            <mx:Component>
                <mx:TextInput restrict="0-9"/>
            </mx:Component>
        </mx:itemEditor> 
    </mx:DataGridColumn>

    <mx:DataGridColumn headerText="Column 5"  editable="true" dataField="col3">
        <mx:itemEditor>
            <mx:Component>
                <mx:TextInput restrict="0-9"/>
            </mx:Component>
        </mx:itemEditor> 
    </mx:DataGridColumn>

    <mx:DataGridColumn headerText="Column 6"  editable="true" dataField="col4">
        <mx:itemEditor>
            <mx:Component>
                <mx:TextInput restrict="0-9"/>
            </mx:Component>
        </mx:itemEditor> 
    </mx:DataGridColumn>

    <mx:DataGridColumn headerText="Column 7"  editable="true" dataField="col5">
        <mx:itemEditor>
            <mx:Component>
                <mx:TextInput restrict="0-9"/>
            </mx:Component>
        </mx:itemEditor> 
    </mx:DataGridColumn>

</mx:columns>
</mx:DataGrid>
<mx:Label x="164" y="211" text="{Acumula}"/>
</mx:Application>

To test the script for example, the first row is the value defalt go filling 85 columns in the same row until the value is greater than 85 there will be an alert issued.

this time I want to change the color of this line to red.

Answer 1

use spark datagrid, which you can able to skin it. in your skin class set your row background depending upon some condition. below code blinks a row depends on given condition.

 <fx:Component id="rowBackground">

            <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
                <fx:Declarations>
                    <s:Animate id="myBlinkingEffect" 
                               repeatCount="0" 
                               repeatBehavior="reverse"
                               target="{rowBackgroundFillColor}"
                               duration="1000"
                               >
                        <s:motionPaths>
                            <s:SimpleMotionPath property="alpha"
                                                valueFrom="1"
                                                valueTo="0"
                                                />
                        </s:motionPaths>
                    </s:Animate>

                </fx:Declarations>
                <fx:Script>
                    <![CDATA[
                        import spark.components.DataGrid;
                        import spark.components.Grid;

                        /**
                         * @private
                         */  
                        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                        {
                            const dataGrid:DataGrid = grid.dataGrid;
                            if (!dataGrid)
                                return;

                            var item:Object;
                            if (rowIndex < grid.dataProvider.length) {
                                item = grid.dataProvider[rowIndex];  // the data item from this row


                                if ( /*your condition*/ ){
                                    rowBackgroundFillColor.color = 0xFF0000;
                                    myBlinkingEffect.play();//Blinking
                                } 

                            }

                        }
                    ]]>
                </fx:Script>  
                <s:fill>
                    <!--- @private -->  
                    <s:SolidColor id="rowBackgroundFillColor" color="0xFFFFFF" alpha="0.5"/>
                </s:fill>
            </s:Rect>
        </fx:Component>