Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Extensions and Plugins > Components

Reply
 
Thread Tools Rate Thread Display Modes
Old 12-18-2008, 06:24 AM   #1
shwetaldesai
Registered User
 
Join Date: Dec 2008
Posts: 1
Default create DataGrid / AdvanceDataGrid dynamically using ActionScript 3.0

is it possible to create DataGrid/AdvanceDataGrid dynamically using ActionScript 3.0, i have queried data from Salesforce.com. now, i need to create columns of DataGrid/AdvanceDataGrid dynamically according to records of the query and then need to assing values to cells from another query.......
but
This entire function must be done dynamically... is it possible??

OR

is there any way to create scheduler with our data, out date and time in Flex???

please help

Shwetal Desai
shwetaldesai is offline   Reply With Quote
Old 12-21-2008, 11:11 PM   #2
showmehow
Registered User
 
Join Date: Dec 2008
Posts: 11
Default

Hi Shwetal,
I am in the process of creating a very similar dynamic datagrid.
This code should get you pointed in the right direction:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!-- This example uses the dataProvider to build the dataGrid columns dynamically -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    creationComplete="initApp()">
<mx:Script><![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<aColumnDef.length;i++)  {                  //loop over the column definition array
      oColumnDef = aColumnDef[i];
      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<xlColumns.length();i++)  {                    //loop over the xmlList
      xmlColumn = xlColumns[i];
      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
]]></mx:Script> 
 
  <mx:XML id="xmlCatalog">
    <catalog>
      <product productId="1">
        <name>Nokia 6010</name>
        <description>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</description>
        <price>99.99</price>
        <image>assets/pic/Nokia_6010.gif</image>
        <series>6000</series>
        <triband>false</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>MMS</highlight1>
      <highlight2>Large color display</highlight2>
      </product>
      <product productId="2">
        <name>Nokia 3100 Blue</name>
        <description>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.</description>
        <price>139</price>
        <image>assets/pic/Nokia_3100_blue.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Glow-in-the-dark</highlight1>
      <highlight2>Flashing lights</highlight2>
      </product>
      <product productId="3">
        <name>Nokia 3100 Pink</name>
        <description>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.</description>
        <price>139</price>
        <image>assets/pic/Nokia_3100_pink.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Glow-in-the-dark</highlight1>
      <highlight2>Flashing lights</highlight2>
      </product>
      <product productId="4">
        <name>Nokia 3120</name>
        <description>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.</description>
        <price>159.99</price>
        <image>assets/pic/Nokia_3120.gif</image>
        <series>3000</series>
        <triband>true</triband>
        <camera>false</camera>
        <video>false</video>
        <highlight1>Multimedia messaging</highlight1>
      <highlight2>Animated screensavers</highlight2>
      </product>
      <product productId="5">
        <name>Nokia 3220</name>
        <description>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.</description>
        <price>159.99</price>
        <image>assets/pic/Nokia_3220.gif</image>
        <series>3000</series>
        <triband>false</triband>
        <camera>true</camera>
        <video>false</video>
        <highlight1>MIDI tones</highlight1>
      <highlight2>Cut-out covers</highlight2>
      </product>
    </catalog>
  </mx:XML>
</mx:Application>
This action script creates a dynamic table using the xml files first product's children nodes as the datagrid column names.
It is also possible to preload an xml file using the <mx:XML /> and using an external xml file.
It is also possible to instead use <mx:HTTPService> as the datasource and pass the information from this http result into an xml variable and dynamically use this as the source for the column names and use another identical <mx:HTTPService> for the dynamic data you wish to populate the list with.

Hope this helps
Showmehow

Last edited by showmehow; 12-21-2008 at 11:16 PM.
showmehow is offline   Reply With Quote
Old 10-01-2010, 05:26 AM   #3
J D
Registered User
 
Join Date: Sep 2010
Posts: 4
Default Dynamic Table and not dynamic column

Just wanted to let you know that this post was helpful. I found a lot of material on dynamic column but not much on dynamic table.

Plugged your code in and voila it worked...

I have added credits to your code ;-)


J D
J D is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamically loading external XML files using ActionScript 3.0 josnajoseph2007 ActionScript 3.0 6 07-01-2008 10:54 AM
pure Actionscript 3.0 ikonik ActionScript 3.0 15 06-23-2008 08:57 PM
How do I create Random Frame Transitions in ActionScript 2.0?? ScarletSniper ActionScript 2.0 3 03-07-2008 01:48 PM
ActionScript 3.0 and Flex DanglingChap ActionScript 3.0 3 02-13-2008 01:08 PM
Dynamically create labels & actionscript? Napalm ActionScript 1.0 (and below) 2 01-15-2002 10:29 AM


All times are GMT. The time now is 07:41 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.