ItemRenderer contentBackgroundColor

Question

i need urget help with some code. I use flex builder 3 and i need to do highlight of content which have a symbols "A,B,C,D,E,F,G,H,I,G,K,L" and i need to make them highlighted with some color in my list. And i dont know how to do this, some people say that i need to use itemRender, but i dont know how to do this in my case. Here is the code:

   <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Bindable]                
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Alexey", Visble:false},
                {label1:"A", Visibe:true},     
                {label1:"B", Visibe:true},     
                {label1:"C", Visibe:true},     
                {label1:"D", Visibe:true},     
                {label1:"E", Visibe:true},     
                {label1:"F", Visibe:true},     
                {label1:"G", Visibe:true},     
                {label1:"H", Visibe:true},     
                {label1:"I", Visibe:true},     
                {label1:"G", Visibe:true},     
                {label1:"K", Visibe:true},     
                {label1:"L", Visibe:true},     

                {label1:"Bill", Visibe:false},     
                {label1:"Den", Visibe:false},     
                {label1:"Dima", Visibe:false},     
                {label1:"Kolya", Visibe:false},     
                {label1:"Vasya", Visibe:false},     
                {label1:"Sergei", Visibe:false},     
                {label1:"Petya", Visibe:false},     
                {label1:"Alina", Visibe:false},     
                {label1:"Dina", Visibe:false},     
                {label1:"Vlada", Visibe:false},     
                {label1:"Tolya", Visibe:false},     
                {label1:"Sasha", Visibe:false}     

            ]);               
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" dataProvider="{myDP}" 
        x="100"
        y="200"
        width="300"
        height="200"
        variableRowHeight="false" 
        editable="false">

        <mx:columns>
            <mx:DataGridColumn dataField="label1" editorDataField="text" headerText="Name">

            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid> 


</mx:Application>

Thanks.

Answer 1

You can try something like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
            layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        public var letters:String = "ABCDEFGHIGKL";

        [Bindable]                
        private var myDP:ArrayCollection = new ArrayCollection([
            {label1:"Alexey", visible:false},
            {label1:"A", visible:true},     
            {label1:"B", visible:true},     
            {label1:"C", visible:true},     
            {label1:"D", visible:true},     
            {label1:"E", visible:true},     
            {label1:"F", visible:true},     
            {label1:"G", visible:true},     
            {label1:"H", visible:true},     
            {label1:"I", visible:true},     
            {label1:"G", visible:true},     
            {label1:"K", visible:true},     
            {label1:"L", visible:true},     

            {label1:"Bill", visible:false},     
            {label1:"Den", visible:false},     
            {label1:"Dima", visible:false},     
            {label1:"Kolya", visible:false},     
            {label1:"Vasya", visible:false},     
            {label1:"Sergei", visible:false},     
            {label1:"Petya", visible:false},     
            {label1:"Alina", visible:false},     
            {label1:"Dina", visible:false},     
            {label1:"Vlada", visible:false},     
            {label1:"Tolya", visible:false},     
            {label1:"Sasha", visible:false}     

        ]);      
    ]]>
</mx:Script>

<mx:DataGrid id="myDG" dataProvider="{myDP}" 
             x="100"
             y="200"
             width="300"
             height="200"
             variableRowHeight="false" 
             editable="false">

    <mx:columns>
        <mx:DataGridColumn dataField="label1" editorDataField="text" headerText="Name">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox horizontalGap="0">
                        <mx:Script>
                            <![CDATA[
                                override public function set data( value:Object ) : void 
                                {
                                    super.data = value;

                                    var isInLetters:Boolean = false;

                                    for (var i:int = 0; i < outerDocument.letters.length; i++)
                                    {
                                        if (outerDocument.letters.charAt(i) == (data.label1 as String).charAt(0))
                                        {
                                            laFirst.setStyle("color", "0xff0000");
                                            laFirst.setStyle("fontWeight", "bold");

                                            isInLetters = true;
                                            break;
                                        }
                                    }
                                    if (!isInLetters)
                                    {
                                        laFirst.setStyle("color", "0x000000");
                                        laFirst.setStyle("fontWeight", "normal");
                                    }
                                }
                            ]]>
                        </mx:Script>

                        <mx:Label id="laFirst"  text="{String(data.label1).charAt(0)}" paddingRight="0"/>
                        <mx:Label text="{String(data.label1).substr(1, String(data.label1).length - 1)}" paddingLeft="-11"/>
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid> 

</mx:Application>

Answer 2

You will need to create your own cell renderer.

Some examples:

• here - detailed
• here - better - but in French

Making changes at the row level is much easier as you can subclass the whole datagrid.