Dynamic DataGrid columns

How can I get this example to wok with %26lt;mx:HTTPService%26gt;
insead of the inline %26lt;mx:XML%26gt; ?



Dynamic DataGrid columns

Example of how to dynamically create DataGridColumns





A completely dynamic DataGrid example.



This example uses the xml from the Flexstore example. It
examines the first product node and uses that to create the
definitions for the columns. There is some example logic to change
the columns properties.



It then instantiates the GataGrid and its columns array,
assigns the properties, and then the dataProvider, and then adds
the dataGrid to the application container.



The example is fully self-contained, since a portion of the
catalog.xml file is included in the mxml.



%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;

%26lt;!-- This example uses the dataProvider to build the
dataGrid columns dynamically --%26gt;

%26lt;mx:Application xmlns:mx=''
http://www.adobe.com/2006/mxml''
layout=''vertical''

creationComplete=''initApp()''%26gt;

%26lt;mx:Script%26gt;%26lt;![CDATA[

import mx.controls.dataGridClasses.DataGridColumn;

import mx.controls.DataGrid;



import mx.collections.XMLListCollection;

import mx.controls.Alert;



[Bindable]

private var _xlcCatalog:XMLListCollection; //the
dataProvider for the DG



//run by creationComplete

public function initApp():void

{

_xlcCatalog = new XMLListCollection(xmlCatalog.product);
//wrap the XML product nodes in an XMLListCollection

buildDG(); //creates the dataGrid

}//initApp



private function buildDG():void

{

var aColumnDef:Array = getColumnDefArray(); //returns a
noraml array of objects that specify DtaGridColumn properties

var oColumnDef:Object;

var dg:DataGrid = new DataGrid; //instantiate a new DataGrid

var dgc:DataGridColumn;

var aColumnsNew:Array = dg.columns

var iTotalDGWidth:int = 0;

for (var i:int=0;i%26lt;aColumnDef.length;i++) { //loop over
the column definition array

oColumnDef = aColumnDef
;

dgc = new DataGridColumn(); //instantiate a new
DataGridColumn

dgc.dataField = oColumnDef.dataField; //start setting the
properties from the column def array

dgc.width = oColumnDef.width;

iTotalDGWidth += dgc.width; //add up the column widths

dgc.editable = oColumnDef.editable;

dgc.sortable = oColumnDef.sortable

dgc.visible = oColumnDef.visible;

dgc.wordWrap = oColumnDef.wordWrap;

aColumnsNew.push(dgc) //push the new dataGridColumn onto the
array

}



dg.columns = aColumnsNew; //assign the array back to the
dtaGrid

dg.editable = true;

dg.width = iTotalDGWidth;

dg.dataProvider = _xlcCatalog; //set the dataProvider

this.addChild(dg); //add the dataGrid to the application

}//buildDG



//uses the first product node to define the columns

private function getColumnDefArray():Array

{

//Alert.show(''colcount:'' + xmlCatalog.toXMLString());

var aColumns:Array = new Array();

var node0:XML = xmlCatalog.product[0]; //get the first
''product'' node

var xlColumns:XMLList = node0.children(); //get its child
nodes (columns) as an XMLList

var xmlColumn:XML

var oColumnDef:Object;

for (var i:int=0;i%26lt;xlColumns.length();i++) { //loop over
the xmlList

xmlColumn = xlColumns;

oColumnDef = new Object();

oColumnDef.dataField = xmlColumn.localName(); //make the
dataField be the node name

switch (oColumnDef.dataField) { //conditional column
property logic

case ''name'':

oColumnDef.width = 80;

oColumnDef.sortable = false;

oColumnDef.visible = true;

oColumnDef.editable = false;

oColumnDef.wordWrap = false;

break;

case ''description'':

oColumnDef.width = 200;

oColumnDef.sortable = false;

oColumnDef.visible = true;

oColumnDef.editable = false;

oColumnDef.wordWrap = true;

break;

case ''price'':

oColumnDef.width = 40;

oColumnDef.sortable = true;

oColumnDef.visible = true;

oColumnDef.editable = true;

oColumnDef.wordWrap = false;

break;

case ''image'':

oColumnDef.width = 100;

oColumnDef.sortable = false;

oColumnDef.visible = false;

oColumnDef.editable = false;

oColumnDef.wordWrap = false;

break;

default:

oColumnDef.width = 50;

oColumnDef.sortable = true;

oColumnDef.visible = true;

oColumnDef.editable = false;

oColumnDef.wordWrap = false;

break;

}

aColumns.push(oColumnDef);

}

return aColumns; //return the array

}//getColumnDefArray

]]%26gt;%26lt;/mx:Script%26gt;



%26lt;mx:XML id=''xmlCatalog''%26gt;

%26lt;catalog%26gt;

%26lt;product productId=''1''%26gt;

%26lt;name%26gt;Nokia 6010%26lt;/name%26gt;

%26lt;description%26gt;Easy to use without sacrificing style,
the Nokia 6010 phone offers functional voice communication
supported by text messaging, multimedia messaging, mobile internet,
games and more%26lt;/description%26gt;

%26lt;price%26gt;99.99%26lt;/price%26gt;

%26lt;image%26gt;assets/pic/Nokia_6010.gif%26lt;/image%26gt;

%26lt;series%26gt;6000%26lt;/series%26gt;

%26lt;triband%26gt;false%26lt;/triband%26gt;

%26lt;camera%26gt;false%26lt;/camera%26gt;

%26lt;video%26gt;false%26lt;/video%26gt;

%26lt;highlight1%26gt;MMS%26lt;/highlight1%26gt;

%26lt;highlight2%26gt;Large color display%26lt;/highlight2%26gt;

%26lt;/product%26gt;

%26lt;product productId=''2''%26gt;

%26lt;name%26gt;Nokia 3100 Blue%26lt;/name%26gt;

%26lt;description%26gt;Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on鈩?gaming cover*, you'll get
luminescent light effects in time to the gaming
action.%26lt;/description%26gt;

%26lt;price%26gt;139%26lt;/price%26gt;

%26lt;image%26gt;assets/pic/Nokia_3100_blue.gif%26lt;/image%26gt;

%26lt;series%26gt;3000%26lt;/series%26gt;

%26lt;triband%26gt;true%26lt;/triband%26gt;

%26lt;camera%26gt;false%26lt;/camera%26gt;

%26lt;video%26gt;false%26lt;/video%26gt;

%26lt;highlight1%26gt;Glow-in-the-dark%26lt;/highlight1%26gt;

%26lt;highlight2%26gt;Flashing lights%26lt;/highlight2%26gt;

%26lt;/product%26gt;

%26lt;product productId=''3''%26gt;

%26lt;name%26gt;Nokia 3100 Pink%26lt;/name%26gt;

%26lt;description%26gt;Light up the night with a
glow-in-the-dark cover - when it's charged with light you can
easily find your phone in the dark. When you get a call, the Nokia
3100 phone flashes in tune with your ringing tone. And when you
snap on a Nokia Xpress-on鈩?gaming cover*, you'll get
luminescent light effects in time to the gaming
action.%26lt;/description%26gt;

%26lt;price%26gt;139%26lt;/price%26gt;

%26lt;image%26gt;assets/pic/Nokia_3100_pink.gif%26lt;/image%26gt;

%26lt;series%26gt;3000%26lt;/series%26gt;

%26lt;triband%26gt;true%26lt;/triband%26gt;

%26lt;camera%26gt;false%26lt;/camera%26gt;

%26lt;video%26gt;false%26lt;/video%26gt;

%26lt;highlight1%26gt;Glow-in-the-dark%26lt;/highlight1%26gt;

%26lt;highlight2%26gt;Flashing lights%26lt;/highlight2%26gt;

%26lt;/product%26gt;

%26lt;product productId=''4''%26gt;

%26lt;name%26gt;Nokia 3120%26lt;/name%26gt;

%26lt;description%26gt;Designed for both business and pleasure,
the elegant Nokia 3120 phone offers a pleasing mix of features.
Enclosed within its chic, compact body, you will discover the
benefits of tri-band compatibility, a color screen, MMS, XHTML
browsing, cheerful screensavers, and much more.%26lt;/description%26gt;

%26lt;price%26gt;159.99%26lt;/price%26gt;

%26lt;image%26gt;assets/pic/Nokia_3120.gif%26lt;/image%26gt;

%26lt;series%26gt;3000%26lt;/series%26gt;

%26lt;triband%26gt;true%26lt;/triband%26gt;

%26lt;camera%26gt;false%26lt;/camera%26gt;

%26lt;video%26gt;false%26lt;/video%26gt;

%26lt;highlight1%26gt;Multimedia messaging%26lt;/highlight1%26gt;

%26lt;highlight2%26gt;Animated screensavers%26lt;/highlight2%26gt;

%26lt;/product%26gt;

%26lt;product productId=''5''%26gt;

%26lt;name%26gt;Nokia 3220%26lt;/name%26gt;

%26lt;description%26gt;The Nokia 3220 phone is a fresh new cut
on some familiar ideas - animate your MMS messages with cute
characters, see the music with lights that flash in time with your
ringing tone, download wallpapers and screensavers with matching
color schemes for the interface.%26lt;/description%26gt;

%26lt;price%26gt;159.99%26lt;/price%26gt;

%26lt;image%26gt;assets/pic/Nokia_3220.gif%26lt;/image%26gt;

%26lt;series%26gt;3000%26lt;/series%26gt;

%26lt;triband%26gt;false%26lt;/triband%26gt;

%26lt;camera%26gt;true%26lt;/camera%26gt;

%26lt;video%26gt;false%26lt;/video%26gt;

%26lt;highlight1%26gt;MIDI tones%26lt;/highlight1%26gt;

%26lt;highlight2%26gt;Cut-out covers%26lt;/highlight2%26gt;

%26lt;/product%26gt;

%26lt;/catalog%26gt;

%26lt;/mx:XML%26gt;

%26lt;/mx:Application%26gt;







Dynamic DataGrid columns
It should work the same way.



What problem are you having?



Tracy