0 Replies Latest reply on Oct 12, 2012 11:37 PM by lyc1977ac

    Incorrect sorting behaviour of custom UIComponents in DataGrid

    lyc1977ac

      I'm creating a DataGrid with one of its columns being a custom class extending a UIComponent. I found the the sorting behaviour is incorrect. My DataGrid is simple and contains just two columns. The first one is a columns of strings: "Red", "Blue", "Green", etc. The second column is a custom class extending UIComponent. This custom UIComponent is just a circle of the corresponding color. When I click on the first column, the names of the colors can be sorted fine, but the second column will be in totally wrong order. Anyone knows what went wrong with it?

       

      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();

              }

          }

      }