Datagrids

[Achernar]

Hi all,

I really need help...i cant get past this.

I am trying to have a datagrid that can add and columns and rows based on the contents of a couple of arrays. I spent several hours trying to figure out how to do a couple of things.

1) Have the Datagrid automatically adjust its widths to the content of the column? is this not a build in feature? i cant find how to do so.

2) Have a set text alignment for each column. So Text words left align and numbers right align (This would effect the entire column including the header. The alignment would be based on the column not the string/number datatype)

3) Most importantly i need the columns to be in a particular order. So the "Name" column is first, following by the "Age" column and then "Nat" and so on but flex keeps arranging them alphabetically. How can i set a custom order?

Here is an example code knockup so you can see. The headers item values must be strings (so not hard coded) cause they need to be able to be modified.

If you copy the code from here and paste it into this online compiler you can see it run: http://try.flex.org/



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();">
<mx:Script>
<![CDATA[
//import mx.controls.*;
import mx.collections.*;

[Bindable]
public var prGrid:ArrayCollection;

public var GridLabels:Array = new Array();
public var PlayerDB:Array = new Array();

public function initApp():void{
// populate the arrays for this example.
// The real code loads these values from local file
GridLabels = ['Name','Age','Nat', 'Sk', 'Points'];
PlayerDB[0] = ['Bob',22,'Ger', 24, 0];
PlayerDB[1] = ['John',32,'Aus', 22, 0];
PlayerDB[2] = ['Harry',26,'Eng', 25, 0];

// do initial population
populateGrid();
}

public function testAddNewColumn():void{
// show how columns are dynamically added for this example.
// The real code would need this ability as it the user will need to be able to add and remove custom columns at their leasure
GridLabels[GridLabels.length] = 'New'+GridLabels.length;

// update grid
populateGrid();
}

public function testAddNewRow():void{
// show how rows are dynamically added for this example.
// The real code would need this ability as it the user will need to be able to add and remove custom columns at their leasure
PlayerDB[PlayerDB.length] = ['Gavin',26,'Dut', 42, 1];

// update grid
populateGrid();
}

public function populateGrid():void{
prGrid = new ArrayCollection();
var c:int = 0;
while(c<PlayerDB.length){
var i:int = 0;
prGrid.addItem({(""+GridLabels[i]):(PlayerDB[c][i])}); // add new item
var tItem:* = prGrid.getItemAt(c); // get the item object
while(i<GridLabels.length){ // this loop will fill the item based on how many labels there are
tItem[GridLabels[i]] = ""+PlayerDB[c][i];
i++;
}
prGrid.setItemAt(tItem, c); // now set the item object back in the binded collection
c++;
}
// update the datagrid
playerRosterGrid.dataProvider = prGrid;
}
]]>
</mx:Script>
<mx:DataGrid id="playerRosterGrid" width="450" height="200" editable="true" sortableColumns="true" resizableColumns="false" x="10" y="10">
</mx:DataGrid>
<mx:Button x="280" y="218" label="New Row" click="testAddNewRow();"/>
<mx:Button x="365" y="218" label="New Column" click="testAddNewColumn();"/>
</mx:Application>


Thanks in advance to any of you actionscript legends that can help. Ive been stuck on this for hours and getting nowhere.

[aftershock]

The DataGrid component will automatically add rows when the data changes in a Bindable ArrayCollection (or similar) so you should not have to do that manually. Thats the beauty of a Bindable object it can receive changes to the data and act on it.

You can manually set the column order and what each should display like this in MXML. You can also set these via ActionScript if you wish.


<mx:DataGrid id="myDataGrid" dataProvider="{myArray}">

<mx:columns>
<mx:DataGridColumn dataField="Name" wordWrap=""/>
<mx:DataGridColumn dataField="Age" />
</mx:columns>

</mx:DataGrid>


The auto adjusting width, can be done a number of ways. First off try the wordWrap option on the DataGridColumn and set it to false.

This may help a bit.