Flex DataGrid does not sort correctly if a column contains custom UIComponent

Question

I have a DataGrid with the first column being strings ("Red", "Blue", etc) and the second column being a circle (custom UIComponent) of the corresponding color. If I click on the first column to sort, all the names of the colors are sorted fine but those circles in the second column are in totally wrong order. Anyone knows what went wrong with the code below?

This is the application mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:components="components.*"
               minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var myArray:ArrayCollection = new ArrayCollection([
                { name:"Red",    color:0xff0000 },
                { name:"Orange", color:0xff8000 },
                { name:"Yellow", color:0xffff00 },
                { name:"Green",  color:0x00ff00 },
                { name:"Blue",   color:0x0000ff },
                { name:"Purple", color:0xff00ff }
            ]);
        ]]>
    </fx:Script>

    <s:DataGrid dataProvider="{myArray}">
        <s:columns>
            <s:ArrayCollection>
                <s:GridColumn dataField="name"/>
                <s:GridColumn dataField="color">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:VGroup>
                                    <components:Circle color="{data.color}" />
                                </s:VGroup>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayCollection>
        </s:columns>
    </s:DataGrid>
</s:Application>

And this is the custom UIComponent:

package components
{
    import mx.core.UIComponent;

    public class Circle extends UIComponent
    {
        public var color:uint;

        public function Circle()
        {
            super();
            height = 20;
            width = 20;
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledWidth);
            graphics.clear();
            graphics.beginFill(color, 1);
            graphics.drawCircle(10, 10, 8);
            graphics.endFill();
        }
    }
}

Answer 1

Your custom component is probably simply not redrawn. The easiest solution to this is to not use a custom component at all and use FXG graphics to draw your circle instead.

Replace your itemrenderer with this one and it should work fine:

<s:GridItemRenderer>
     <s:Ellipse width="20" height="20">
         <s:fill>
              <s:SolidColor color="{data.color}" />
         </s:fill>
     </s:Ellipse>
</s:GridItemRenderer>

That said, I would put the label and the color sample in one column (instead of two) since they represent the same data.