asked on

Need help getting data to appear in a Flex dataGrid done in ActionScript

Dear fellow developers:

I am having trouble getting the data of my datagrid to appear in a very basic flex application using ActionScript. The data is static, and for some reason, the columns, and the column headings appear, but the data itself does not show up inside the table. Any ideas? I am including my full code below.

Thanks in advance to all who reply.

datagridexample.mxml file
-------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	verticalAlign="middle"
    backgroundColor="white"
    creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			import mx.controls.DataGrid;
			import mx.controls.dataGridClasses.DataGridColumn;
			
			import DataTable.Table;
				
			[Bindable]
			public var arr:ArrayCollection = new ArrayCollection();
			[Bindable]
			private var tabData:ArrayCollection;
			
			//private var arr = new ArrayCollection();
			
			//public var gps:Charts = new Charts();
			public var myGrid:DataGrid = new DataGrid;
			private var tab:Table = new Table(); 
			
			private function getDataProvider():ArrayCollection {
        		        	        	
				
       			arr.addItem({name: "World of Warcraft", creator: "Blizzard", publisher: "Blizzard"});
       			arr.addItem({name: "Halo", creator: "Bungie", publisher: "Microsoft"});
       			arr.addItem({name: "Gears of War", creator: "Epic", publisher: "Microsoft"});
	        	
	        	return arr;
        	
        	}
			
			private function init():void{
			
				tabData = getDataProvider();
				
				 // Creating the first column  
				var columnOne:DataGridColumn = new DataGridColumn;  				 
			    columnOne.headerText = 'name';  
			    			
				var columnTwo:DataGridColumn = new DataGridColumn;  
				columnTwo.headerText = 'creator';  
			    
			    var columnThree:DataGridColumn = new DataGridColumn;
			    columnThree.headerText = 'publisher';
			    
			    
   
			    // New array to hold the column information  
			    var cols:Array =[];  
	
			    // Add the column information to the new array  
			    cols.push(columnOne);  
				cols.push(columnTwo);  
				cols.push(columnThree);
   
 				// Apply the array to the datagrid
 				tab.plotDataGrid(myPanel, cols, tabData);
 				  
				
					
				
			}
		]]>
	</mx:Script>
	<mx:Panel width="100%" height="100%" id="myPanel" />
	
</mx:Application>
---------------------
Table.as file
---------------------
package DataTable
{
	import mx.controls.DataGrid;
	import mx.core.Container;
	
	public class Table
	{
		
		public var myGrid:DataGrid = new DataGrid;
		
		public function Table()
		{
		} 
		public function plotDataGrid(container:Container, columnHeadings:Array, columnData:Object):void{
			
			myGrid.columns = columnHeadings;
			myGrid.dataProvider = columnData;
			
			container.addChild(myGrid);
			
			
		}
		
		
	}
}

Open in new window

fsyed

ASKER

I figured out how to get the datagrid to display the values. I simply had not set the dataField attribute for the DataGridColumn objects. However, I do have a follow up question. How do I dynamically create the columns, given an array of values?

What I would like to do, is pass the "columnData" array that I receive in the "plotDataGrid()" method, and send it to the "createColumns()" method, and using the array it receives, create the correct number of columns, while setting the headerText, and dataField attributes simultaneously. Once all of the DataGrid column objects are created, the "createColumns()" methd should then return an array of these objects back to "plotDataGrid()". My gut feeling is that this would all go into a for loop, but I am not sure how to construct it, and have all of the above procedures done successfully.

Any ideas/suggestions?

Thanks in advance to all who reply.

datagridexample.mxml
--------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute"
	verticalAlign="middle"
    backgroundColor="white"
    creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			import mx.controls.DataGrid;			
			
			import DataTable.Table;
				
			[Bindable]
			public var arr:ArrayCollection;
			[Bindable]
			private var tabData:ArrayCollection;
			
			
			public var myGrid:DataGrid = new DataGrid;
			private var tab:Table = new Table(); 
			
			private function getDataProvider():ArrayCollection {
        		        	        	
				arr = new ArrayCollection();
       			arr.addItem({column1: "World of Warcraft", column2: "Blizzard", column3: "Blizzard"});
       			arr.addItem({column1: "Halo", column2: "Bungie", column3: "Microsoft"});
       			arr.addItem({column1: "Gears of War", column2: "Epic", column3: "Microsoft"});
	        	
	        	return arr;
        	
        	}
			
			private function init():void{
			
				tabData = getDataProvider();
				
 				tab.plotDataGrid(myPanel, tabData);
 				  
				
					
				
			}
		]]>
	</mx:Script>
	<mx:Panel width="100%" height="100%" id="myPanel" />
	
</mx:Application> 
--------------------------------
Table.as
--------------------------------
package DataTable
{
	import mx.collections.ArrayCollection;
	import mx.controls.DataGrid;
	import mx.controls.dataGridClasses.DataGridColumn;
	import mx.core.Container;
	
	public class Table
	{
		
		public var myGrid:DataGrid = new DataGrid;
		
		public function Table()
		{
		}
		
		public function createColumns():Array{
			
			var columnOne:DataGridColumn = new DataGridColumn;  				 
		    columnOne.dataField = 'column1';
		    columnOne.headerText = 'name';  
		    
		    			
			var columnTwo:DataGridColumn = new DataGridColumn;  
			columnTwo.dataField = 'column2';
			columnTwo.headerText = 'creator';
			  
		    
		    var columnThree:DataGridColumn = new DataGridColumn;
		    columnThree.dataField = 'column3';
		    columnThree.headerText = 'publisher';
		    
		    
		    
   
		    // New array to hold the column information  
		    var cols:Array =[];   
		    // Add the column information to the new array  
		    cols.push(columnOne);  
			cols.push(columnTwo);  
			cols.push(columnThree);
			
			return cols;
		} 
		public function plotDataGrid(container:Container, columnData:ArrayCollection):void{
			
			myGrid.columns = createColumns();
			myGrid.dataProvider = columnData;
			
			container.addChild(myGrid);
			
			
		}
		
		
	}
}

Open in new window

ASKER CERTIFIED SOLUTION

zzynx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

zzynx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

fsyed

ASKER

You're very right about the header columns, as I forgot to mention that those values will also be provided by the user, and be provided in a separate array. If the user provides both an array of values to fill the datagrid, and an array of names to use as the header text, how would this impact the solution you provided?

Thanks again for your prompt solutions, I really do appreciate it!

SOLUTION

zzynx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

fsyed

ASKER

Thanks very much for your amazing solution so promptly! I asked you for silver, and you gave me gold :-)

You're a gentleman, and a scholar!

Points well deserved!

Take care.

zzynx

Again, thanks for your kind words and success with Flex.
Thanx 4 axxepting

fsyed

ASKER

When you get a moment, please look at my new question:

https://www.experts-exchange.com/questions/24918915/Unable-to-view-pie-chart-using-external-component.html

Thanks.