Adobe Flex: Add a combo box to a DataGrid that re-orders its elements

Here I am posting a solution for a problem I had to solve for one of my projects. I needed to add a combo box to one of the columns in a DataGrid. Not only that, based on the value of the combo box, the elements in the DataGrid should re-order.
To add the combo box to one of the columns we need to set that column as editable and we need to add an item editor(in this case an inline item editor):

<mx:itemEditor>
    <mx:Component>
 <mx:ComboBox  editable="false" dataProvider="{outerDocument.sequenceNumbers}">
                        
 </mx:ComboBox>
    </mx:Component>
</mx:itemEditor>

To sort the data grid based on the column you need to apply a SortField to the
ArrayCollection that holds the elements of the DataGrid.

   /**
    * Sort list of questions by sequence
    */
   private function sortQuestions():void {
    var sort:Sort= new Sort();
       var sequence:SortField= new SortField("Sequence",false,false);
       sort.fields=[sequence];
       this.questions.sort=sort;
       this.questions.refresh();
   
   }

The full code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationComplete()">
 <mx:Script>
  <![CDATA[
   import mx.collections.Sort;
   import mx.collections.SortField;
   [Bindable]
   public var sequenceNumbers:ArrayCollection;
   
   /**
    * Prepare the data
    */
   private function creationComplete():void {
    this.initSequenceNumbers();
    this.sortQuestions();
   }
   
   /**
    * Sort list of questions by sequence
    */
   private function sortQuestions():void {
    var sort:Sort= new Sort();
       var sequence:SortField= new SortField("Sequence",false,false);
       sort.fields=[sequence];
       this.questions.sort=sort;
       this.questions.refresh();
   
   }
   
   /**
    * We initialize the sequence numbers taking into account the number of questions
    */ 
   private function initSequenceNumbers():void {
    this.sequenceNumbers= new ArrayCollection();
    for (var i:int=0; i<questions.length; i++ ) {
     sequenceNumbers.addItem(i+1);
    }
   }
  ]]>
 </mx:Script>
      <mx:DataGrid width="300" rowCount="4" editable="true">
             <mx:ArrayCollection id="questions">
           <mx:Object>
              <mx:Sequence>1</mx:Sequence>
              <mx:Question>Who is the queen of England?</mx:Question>
           </mx:Object>
           
               <mx:Object>
              <mx:Sequence>3</mx:Sequence>
              <mx:Question>Who is the king of pop?</mx:Question>
           </mx:Object>
           
           <mx:Object>
              <mx:Sequence>2</mx:Sequence>
              <mx:Question>Who is the king of Spain?</mx:Question>
           </mx:Object>
 
         </mx:ArrayCollection>
 
             <mx:columns>
                 <mx:DataGridColumn id="sequenceColumn" dataField="Sequence" headerText="Sequence" editable="true" editorDataField="value" sortable="false" >
               <mx:itemEditor >
                   <mx:Component>
                       <mx:ComboBox  editable="false" dataProvider="{outerDocument.sequenceNumbers}"  >
                        
                       </mx:ComboBox>
                   </mx:Component>
               </mx:itemEditor>
           </mx:DataGridColumn>
                 <mx:DataGridColumn dataField="Question" headerText="Question" editable="false" sortable="false"/>
             </mx:columns>
         </mx:DataGrid>
</mx:Application>

Click here to see the Combo box in a DataGrid example in action