We help IT Professionals succeed at work.

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

fsyed
fsyed asked
on
1,214 Views
Last Modified: 2013-11-11
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

Comment
Watch Question

Author

Commented:
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

Sr. Software engineer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
zzynxSr. Software engineer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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!
zzynxSr. Software engineer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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.
zzynxSr. Software engineer
CERTIFIED EXPERT

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

Author

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

https://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Flex/Q_24918915.html

Thanks.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.