dataGrid - dynamically change order of columns

[skinnyFlash]

I'm trying to dynamically reset the order of columns in my dataGrid. I thought it would be as simple as changing columnIndex but can't find anything about how to make that work.

What I have is a list component that is populated by all of the dataGrid column/header names. I have to allow the user to re-order the header/column names within the list component > click ok/done > and then have the datagrid columns re-ordered as specified.

Is there something simple (like columnIndex) that I'm missing or do I have to somehow re-organize my array and re-populate the dataGrid?

Any help greatly appreciated!!

[kahuja]

You would need to swap the columns, which are added to the grid.

[skinnyFlash]

Hi Kahuja,
Thanks for the reply.
I actually have another question if you'd be so kind.
I'm using PopUpManager to create a dialog box that conains a List. What I need to do is take the contents of the List and turn it into an array that I can then use in the main application. I'm having trouble reading the array once back in the main app.

Let me know if you require to the code.

Thanks in advance!!

[kahuja]

Use the MVC architecture; when you make an array, bind that to a Model (singleton implementation) and then use that in the application.

I am making certain assumptions on the problem you are facing, in case this is not the case, please explain your problem.

[skinnyFlash]

Great!
Things are working out over here...finally!!
Thanks again.

[kahuja]

Good to hear, enjoy Flexing!!

[skinnyFlash]

Unfortunately I wasn't as successful as I thought at dynamically changing the order of my dataGrid columns and now I'm in desperate need of help. Below I've included a very simplified bit of code and if anyone out there could make it so that the button included in the code simply swaped the positions of the two columns I would be greatful! When the "Toggle Columns" button is pressed I need the column (and its rows) "Name" to swap places with the column "Account":

<?xml version="1.0"?>
<!-- dpcontrols/DataGridValidateNowSelindex.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="initData();">

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]
private var DGArray:ArrayCollection = new ArrayCollection([
{Account:'Lorem', Name:'Albert'},
{Account:'Lorem Ipsum', Name:'Ben'}]);

// Initialize initDG ArrayCollection variable from the ArrayCollection.
public function initData():void {
myGrid.dataProvider = DGArray;
myGrid.validateNow();
//myGrid.selectedIndex=1;
}
]]>
</mx:Script>

<mx:DataGrid id="myGrid" sortableColumns="true" lockedColumnCount="0"
horizontalScrollPolicy="on" height="200" width="400">
<mx:columns>
<mx:DataGridColumn dataField="Account" id="account"/>
<mx:DataGridColumn dataField="Name" id="tname"/>
</mx:columns>
</mx:DataGrid>

<mx:Button label="Toggle Columns" click="account.visible = !account.visible;" />
</mx:Application>


I will be extremely greatful is someone could help with this!

Thanks in advance!

[kahuja]

Just to be clear, are you looking at a code that swaps the columns?

[skinnyFlash]

I have nothing in place that has successfully worked so the answer is no. What I'm pretty sure needs to happen at this point is that I need to dynamically create the DataGridColumns with an array so that with the click of a button I can re-order the array and then re-create the DataGridColumns with the re-ordered array (not sure). It seems simple enough but I can't find out how to dynamically create the DataGridColumns. I've been working on this for days and I feel like I'm going in circles! The code I included in my last post (as you can tell) is just a dataGrid with a button and my hope was someone would re-post the code with a working example (of swapping columns using the button) for me to work from. I of course would love any type of help with this though!

[skinnyFlash]

I finally got something to work (not the best way I'm sure)...now I have to assign an ID number to each dataGrid column name within the array some how. You'll see in the application that when you click on the List entries the dataGrid swaps its colmuns depending on which list name you click on. My goal at this point is to make it so that the user can rearrange (drag and drop) the names that are displayed in the List component and the dataGrid's column names will re-arrange accordingly. Any ideas?
<?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;
private var arrayOfObject:Array;

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

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

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

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

]]>
</mx:Script>

<mx:DataGrid id="myGrid" initialize="init();">
<mx:columns>
<mx:DataGridColumn dataField="{arrayOfString[nIDOne]}" />
<mx:DataGridColumn dataField="{arrayOfString[nIDTwo]}" />
</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>
Any input or help is extremely welcome and will be much appreciated!

Thanks!

[skinnyFlash]

Finally got it! Anyone who's curious...code's below. Dynamically sorting columns controlled by list drag and drop. Thanks for replying kahuja...I probably would have given up otherwise.
<?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 arrayToMatch:Array = new Array
("SC", "Account", "Actions");
//
[Bindable]private var tmpArray:Array = new Array();
//
[Bindable]private var datagridColumns:Array = new Array();

[Bindable]
public var DGArray:ArrayCollection = new ArrayCollection([
{Account:'Jack', SC:'Lots', Actions:'yahoo'},
{Account:'Jill', SC:'None', Actions:'amazon'}
]);

private function init():void {
myGrid.dataProvider = DGArray;
myGrid.validateNow();
}

private function formatView():void {
tmpArray = [];
datagridColumns = myGrid.columns;
//
for(var i:Number=0; i<arrayToMatch.length; i++){
for(var j:Number=0; j<datagridColumns.length; j++){
if(arrayToMatch[i]==datagridColumns[j].headerText){
trace(arrayToMatch[i], "MATCHES", datagridColumns[j].headerText);
tmpArray.push(datagridColumns[j]);
}
}
}
myGrid.columns = tmpArray;
}
]]>
</mx:Script>

<mx:DataGrid id="myGrid" initialize="init();">
<mx:columns>
<mx:DataGridColumn dataField="Actions" id="actions" width="80">
<mx:itemRenderer>
<mx:Component>
<mx:PopUpMenuButton label="Actions" width="80"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="SC" width="38"/>
<mx:DataGridColumn dataField="Account"/>
</mx:columns>
</mx:DataGrid>
<!--<mx:Button label="Swap Columns" click="swapColumns()" />-->

<mx:List
id="tReturn"
dataProvider ="{arrayToMatch}"
allowMultipleSelection="true"
labelField="dataField"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
/>

<mx:Label text="Drag and drop items in list to desired order and click Resort"/>
<mx:Button label="Resort" click="formatView()"/>

</mx:Application>


I am thankful to forums