0 Replies Latest reply on Apr 11, 2008 2:23 PM by skinnyfingers

    dataGrid - dynamically re-order columns

    skinnyfingers
      I've desperately been trying to dynamically reset the order of columns within my dataGrid. I've been working on it for a few days and have had little luck. Below is what I have working now (very slimmed down version) but it's just a work around since I need it all to be organized by arrays. The end result should be that the user can arrange the names in the List component and then the dataGrid changes its column order to follow suite. The code is below and I'd be extremely greatful for any advice or input.
      [CODE]
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="vertical"
      verticalAlign="middle"
      backgroundColor="white">

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

      [Bindable]private var arrayOfString:Array;
      [Bindable]private var nIDOne:Number = 0;
      [Bindable]private var nIDTwo:Number = 1;
      [Bindable]private var nIDThree:Number = 2;

      [Bindable]
      public var DGArray:ArrayCollection = new ArrayCollection([
      {Artist:'Jack', Price:'Lots', Store:'yahoo'},
      {Artist:'Jill', Price:'None', Store:'amazon'}
      ]);

      private function init():void {
      arrayOfString = ["Artist", "Price", "Store"];

      myGrid.dataProvider = DGArray;
      myGrid.validateNow();
      }

      private function swapColumns():void {
      if(tReturn.selectedItem == "Artist"){
      nIDOne = 0;
      nIDTwo = 1;
      nIDThree = 2;
      }else if(tReturn.selectedItem == "Price"){
      nIDOne = 1;
      nIDTwo = 0;
      nIDThree = 2;
      }else if(tReturn.selectedItem == "Store"){
      nIDOne = 2;
      nIDTwo = 1;
      nIDThree = 0;
      }
      init();
      }

      ]]>
      </mx:Script>

      <mx:DataGrid id="myGrid" initialize="init();">
      <mx:columns>
      <mx:DataGridColumn dataField="{arrayOfString[nIDOne]}" />
      <mx:DataGridColumn dataField="{arrayOfString[nIDTwo]}" />
      <mx:DataGridColumn dataField="{arrayOfString[nIDThree]}" />
      </mx:columns>
      </mx:DataGrid>
      <!--<mx:Button label="Swap Columns" click="swapColumns()" />-->

      <mx:List
      id="tReturn"
      dataProvider ="{arrayOfString}"
      allowMultipleSelection="true"
      labelField="dataField"
      dragEnabled="true"
      dropEnabled="true"
      dragMoveEnabled="true"
      click="swapColumns()"
      />

      <mx:Label text="Selected (index values): {tReturn.selectedIndex} "/>
      <!--<mx:Button label="Swap Columns" click="swapColumns()"/>-->

      </mx:Application>
      [/CODE]

      Any help with this would be greatly appreciated.

      Thanks in advance!