Flex DataGrid: Programmatically Highlighting Rows

Question

This seems like something that should be painfully simple, but I can't even find how to loop through rows in a Flex DataGrid.

Basically what I'm trying to accomplish is something like this pseudo-code:

for each(var row:Row in myDataGrid.Rows)
{
    if(row.DataObject.Number == 1)
    {
        row.Color = Red;
    }
}

I'm trying to have a Save button that upon being clicked either processes the save, or highlights the invalid rows and pops up a message telling the user why the rows are invalid. Because of some other complexities, I am not able to validate each row as it is entered. Any help is appreciated! Thanks.

Answer 1

Data grids are intended to be driven by their data rather than manipulated directly. One way to accomplish what you are trying to do is to add some sort of property, say "valid", to the data objects in your provider and add code to the renderer to alter its appearance based on the state of "valid". In that way you could loop through the objects in your data provider and set the "valid" property based on your validation check, which would cause the rows in the data grid to change their appearance automatically.

Hope that helps.

Answer 2

Try something like this:

for each(var o:Object in myDataGrid.dataProvider)
{
    if(o.Number == 1) {
        myDataGrid.selectedItems.push(o);
    }
}

In your mxml you can set the selectionColor of the datagrid to red. See: http://blog.flexexamples.com/2008/02/19/setting-the-selection-color-and-selection-disabled-color-for-a-row-in-the-flex-datagrid-control/

Let me know if this works for you!

Answer 3

I am not sure you can do it on the data grid itself, but if you have an item renderer for each of the items, you can have your highlighting logic there.

basically, you define your datagrid's item renderer class:
<mx:DataGrid itemRenderer="ItemRendererClass"(...) ></mx:DataGrid>

and then you define the class "ItemRendererClass" as implementing IDataRenderer:

implements="mx.core.IDataRenderer"

This is a simplistic explanation, assuming you can figure out how to do this on yourself :)

Answer 4

I achieved this by overriding the set data. I have provided the sample code below.

override public function set data(value:Object):void
    {
        super.data=value;
        if(value!=null && value.hasOwnProperty("state") && value.state == "Final State"){               
                setStyle("color", 0xb7babc);
        }else{
            setStyle("color", 0x000000);
        }
        this.selectable=false;
        super.invalidateDisplayList();
    }