Setting background color in a flex datagrid

Question

I have created a search tab and by giving different inputs i am listing search objects in my datagrid. I want to color each row wrt to its type e.g For Admin Red color or red text is displayed in respected datagrid row. How can i do that , atm i am using this code for creating datagrid.

<mx:DataGrid x="170" y="10" height="238" width="318" dataProvider="{userContacts}" id="contactsGridView">
        <mx:columns>
            <mx:DataGridColumn width="80" headerText="Username" dataField="username"/>
            <mx:DataGridColumn width="80" headerText="First Name" dataField="firstName"/>
            <mx:DataGridColumn width="80" headerText="Last Name" dataField="lastName"/>
            <mx:DataGridColumn  headerText="Type" dataField="type">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:VBox>
                            <mx:Text width="100%" text="{(data.type == 1)? 'Admin':((data.type == 2)? 'Doctor': ((data.type == 4)? 'Patient' : ((data.type == 3)? 'Nurse':((data.type == 5)? 'Professional':((data.type == 6)? 'Loved One': 'Unknown')))))}"/>
                        </mx:VBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

Exhausted Exhausted · Accepted Answer · 2011-11-23T05:21:33

Its easy to apply style using the setStyle() function. apply the same color for alternating Item colors and also the header color. during the search string is null or empty set the default color using the same setStyle() propety.

for further reference Click Here for the Style Explorer.

Setting background color in a flex datagrid

1 Answers