HTML in DataGrid

Is it possible to use HTML in a dataGrid? I'm trying to put a
red asterisk next to certain items and I'm not sure it's possible.
Thanks.

Here is a full example. Note that it uses a custom event, but
that is not really necessary. Instead, you can make a public
property in the renderer that contains the data you need, then
access that property in the result handler, via the "target"
event.property.
http://www.cflex.net/showFileDetails.cfm?ObjectID=595
Tracy

Similar Messages

HTML Link in Datagrid

Is there a way to create an html link in one of the columns
of a datagrid?

Here is a full example. Note that it uses a custom event, but
that is not really necessary. Instead, you can make a public
property in the renderer that contains the data you need, then
access that property in the result handler, via the "target"
event.property.
http://www.cflex.net/showFileDetails.cfm?ObjectID=595
Tracy

AS3 Datagrid - html link?

I have a custom cell renderer for a AS3 Datagrid and the html
tags work except for the links. Anyone know how to get those to
work?
I am using the class below for the custom renderer which is
called in the fla with
dg.setStyle("cellRenderer", CustomCellRenderer);

Hi,
Thanks for the advice, will do, sounds interesting and useful.
There seems to be a lot on dataGrids and xml but little on dataGrids and csv which is blinding us a bit.
We arrived at the following solution after a lucky find with yet more googling, that seems to work, not sure if its the most suitable but here it is:-
dg.addEventListener(ListEvent.ITEM_CLICK,dgClickF);
function dgClickF(e:ListEvent):void{
//trace(e.columnIndex, e.rowIndex)
//trace("Focus has left row: " +e.rowIndex + " col: " + e.columnIndex)
if (e.columnIndex == 6 || e.columnIndex == 7){
var cellData = e.target.columns[e.columnIndex].itemToLabel(e.target.getItemAt(e.rowIndex));
//trace(cellData)
var url : String = cellData;
var targetURL:URLRequest = new URLRequest(url);
navigateToURL(targetURL,"_blank")};
Placed it in before the ITEM_CLICK code.
Envirographics

AS3 Datagrid HTML CellRenderer

Hello everyone, I'm trying to display some simple HTML inside
a datagrid. Without avail this task is becoming very time
consuming. I've scoured the docs and have done all the custom
cellRenderer examples. I'm open to a any ideas or just which class
I need to extend, CellRenderer? UIComponent? Arrrggg.. thx

Flex cellRenderer provides a small subset of HTML markup. If
you want to do anything more than that, check out this component:
HTML
component for Flex

DataGrid, HTML Text, and WORD WRAPPING

I have a datagrid, with 2 columns:
- comment
- date
The dataprovider that feeds the datagrid is an array
collection, with each object containing the following fields:
- comment
- date
- viewed
What I want to do is BOLD the comment cell if the comment has
not yet been viewed. What I first tried doing was to just insert
the <b></b> tags on the server and then feed them up to
Flex. So here's the code that I had tried to do this with:
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label htmlText="{data.comment}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
This works, but I lose the word wrapping for long comments (I
have wordwrap="true" defined on my DataGrid).
Then I tried changing my approach and doing something a
little more simple to try and preserve the word wrapping, like
this:
<mx:DataGridColumn dataField="comment" width="100"
wordWrap="true" fontWeight="{(data.viewed==0 ? 'bold' : 'normal')}"
/>
Yet that doesn't seem to work either, it appears to just
completely ignore everything... no bolding whatsoever.
So my question is: what's the best to to control the BOLDING
of a DataGrid cell while at the same time retaining the word wrap
features?
Thanks,
Jacob

<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label htmlText="{data.comment}"
wordWrap="true" height="100%"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
You might also have a little more luck working with a
TextArea

Surely this is possible dataGrid html link..but suspicious absence on forum and net.

Hi,
Flash CS5 AS3
Having googled what I thought would have many instances of how its done, I have gotten nowhere, as have others with no replies to their postings.
Google shows nothing for as3; flex3 forum has something but we are not using flex.
Is it possible to have a dataGrid and text for websites in cells that when clicked on go to that URL ?
Has Adobe overlooked the ability to create a hyperlink from a url in a cell ?
My situation. We have a dataGrid populated from a csv file. col1 has bus service number, nothing shows for that. col2 to 6 have settlement names and display MC's, col7 and col8 have url's which we want as hyperlinks, one goes to a timetable the other to a very detailed map.
Currently we have it that click on row outputs data from all cells in that row. Sttmnt names are output less gaps and apostrophes and code appends _Layer2 or _Layer3 depending on where they are in the map display hierarchy. Output tab also shows it identifying the col1 data which are service numbers, but there doesnt seem to be a need to disable that as its not causing any problems despite there being no matching MC's !
We also see the two url's output. They are however stripped of // gaps and full stops
We dont want any websites being launched until user deliberately clicks the cell in col7 or col8.
How is this done ? i.e what is the code to make a hyperlink from a cell ?
In with this we also need to tell the code to ignore col7 and 8 on click that shows up the sttmnts and appends _Layer2 or _Layer3 yet accept a click when made in col7 or col8 and not to strip out the characters and gaps and not to append _Layer2 or _Layer3.
Just what should this code below be to accomplish this ?
our code thus far:-
import flash.net.URLLoader;
import flash.events.Event;
import flash.net.URLRequest;
import fl.data.DataProvider;
import fl.controls.DataGrid;
import fl.events.ListEvent
makeAllVisibleF(false);
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE,completeF);
urlLoader.load(new URLRequest("BusMapHyperlinks_txtMatchMCv3.csv"));
var dg:DataGrid
function completeF(e:Event):void{
    var dataS:String = e.target.data;
    var dataA:Array = dataS.split("\n").join("").split("\r");
    var dpA:Array = [];
    var itemA:Array;
var r:RegExp = /\W/g;
    for(var i:int=0;i<dataA.length;i++){
        itemA = dataA[i].split(",");
         dpA.push({"col1":itemA[0],"col2":itemA[1],"col3":itemA[2],"col4":itemA[3],"col5":itemA[4] ,"col6":itemA[5],"col7":itemA[6],"col8":itemA[7]});
var dp:DataProvider = new DataProvider(dpA);
    dg.columns = ["col1","col2","col3","col4","col5","col6","col7","col8"]
dg.columns[0].width = 57;
    dg.columns[1].width = 182;
    dg.columns[2].width = 143;
    dg.columns[3].width = 90;
    dg.columns[4].width = 110;
dg.columns[5].width = 65;
dg.columns[6].width = 62;
dg.columns[7].width = 30;
    dg.dataProvider = dp;
dg.addEventListener(ListEvent.ITEM_CLICK,dgClickF);
function dgClickF(e:ListEvent):void{
trace(e.columnIndex, e.rowIndex);
dg.addEventListener(ListEvent.ITEM_CLICK,ShowSymbols);
function ShowSymbols(e:ListEvent):void{
makeAllVisibleF(false);
var r:RegExp = /\W/g;
for(var s:String in e.item){
if(e.item[s]){
var clipName :String = String(e.item[s]).replace(r,"")+currentLevel;
trace(clipName)
if(Map_Collection[clipName]){
Map_Collection[clipName].visible=true;
trace(s,e.item[s])
trace(currentLevel)
function makeAllVisibleF(b:Boolean):void{
Map_Collection.MitresGate_Level2.visible=b;
Map_Collection.MitresGate_Level3.visible=b;
and many more names !!!
Envirographics

Hi,
Thanks for the advice, will do, sounds interesting and useful.
There seems to be a lot on dataGrids and xml but little on dataGrids and csv which is blinding us a bit.
We arrived at the following solution after a lucky find with yet more googling, that seems to work, not sure if its the most suitable but here it is:-
dg.addEventListener(ListEvent.ITEM_CLICK,dgClickF);
function dgClickF(e:ListEvent):void{
//trace(e.columnIndex, e.rowIndex)
//trace("Focus has left row: " +e.rowIndex + " col: " + e.columnIndex)
if (e.columnIndex == 6 || e.columnIndex == 7){
var cellData = e.target.columns[e.columnIndex].itemToLabel(e.target.getItemAt(e.rowIndex));
//trace(cellData)
var url : String = cellData;
var targetURL:URLRequest = new URLRequest(url);
navigateToURL(targetURL,"_blank")};
Placed it in before the ITEM_CLICK code.
Envirographics

Flash 2.0 Datagrid component bug ?

Recently I found a bug in Datagrid component. The swf file
which contain datagrid act differely in IE 6, and IE 7.
This is what I've done:
1) Compile swf, export it together with html file.
2) Run the html file
3)Press on one of the cell,drag it and then release it
outside of the browser/flash canvas.
4)Move the mouse pointer back to flash canvas
5)The grid will scroll automatically( move the move up and
down to test)
6)After a few times mouse pointer movement, suddenly IE
crash, CPU usage 100%
I have tested the swf file on firefox 2.007 and stand alone
flash player, however, none of the flash player have this bug.
Therefore I suspect that the ActiveX flash plugin for IE cause this
bug.
This is the source code, which I use to create the datagrid
for testing.
ps: open one fla file, drag datagrid component from component
panel to the stage or it will not run.
import mx.controls.DataGrid;
var header = "Stock Code/\nName,Type,Status,Order
Date\nTime,Duration,OrderQty/\nPrice,Matched Qty/\nPrice,Trd
Curr/\nMatched Value,Account No/\nOrder No";
var wid =
"90,43.2699356842522,91.5969497381748,87.4747020181826,60.4473499934867,67.9851014914014, 90.2231829093762,111.8984058876167,134.104372277509";
var alig = "left ,left, left , left , left , right , right ,
right , left ";
var halig = "center ,center,center , center , center , center
, center , center , center ";
var fxdata:Array = new Array();
fxdata[0]= new Array("67676
GPACKET","Buy","Expired","05/09/2007 06:04:20 PM","Day","200
4.34","0 0.00","MYR 0.00","423423423432");
fxdata[1]= new Array("054066
FASTRAK","Buy","Expired","05/09/2007 01:45:18 PM","Day","47,900
0.27","0 0.00","MYR 0.00","fdsfsdfsdf");
fxdata[2]= new Array("737013
HUBLINE","Sell","Expired","05/09/2007 11:53:19 AM","Day","400
0.69","0 0.00","MYR 0.00","93743");
fxdata[3]= new Array("31474
L&G","Buy","Expired","03/09/2007 11:35:35 AM","Day","500
0.70","0 0.00","MYR 0.00","389dskjfsd");
fxdata[4]= new Array("38182
GENTING","Buy","Expired","28/08/2007 11:38:59 AM","Day","500
7.35","0 0.00","MYR 0.00","90sklsdakl");
fxdata[5]= new Array("05005
PALETTE","Buy","Expired","28/08/2007 11:08:23 AM","Day","500
0.115","0 0.00","MYR 0.00","jsdaflk;as");
fxdata[6]= new Array("093082
GPACKET","Buy","Expired","27/08/2007 03:49:43 PM","Day","300
3.82","0 0.00","MYR 0.00","jsdafj;sda");
fxdata[7]= new Array("644769
KELADI","Buy","Expired","27/08/2007 11:05:36 AM","Day","10,000
0.30","0 0.00","MYR 0.00","jsadjf;lkdas");
fxdata[8]= new Array("676653
KASSETS","Buy","Expired","24/08/2007 06:15:33 PM","Day","500
2.93","0 0.00","MYR 0.00","jlsdf;adas");
fxdata[9]= new Array("473323
JAKS","Buy","Expired","23/08/2007 04:45:03 PM","Day","100 0.915","0
0.00","MYR 0.00","jjkljsdlfasd");
fxdata[10]= new Array("03069
IPOWER","Buy","Expired","22/08/2007 10:18:01 AM","Day","9,800
0.365","0 0.00","MYR 0.00","jlajsd;lfjads");
fxdata[11]= new Array("05025
LNGRES","Buy","Expired","21/08/2007 03:08:06 PM","Day","9,900
0.28","0 0.00","MYR 0.00","jlkjsdafl");
fxdata[12]= new Array("01308 N2N","Buy","Expired","21/08/2007
10:34:51 AM","Day","200 1.71","0 0.00","MYR 0.00","mjkjadsflasd");
fxdata[13]= new Array("70069
IPOWER","Buy","Cancelled","21/08/2007 10:02:08 AM","Day","0
0.37","0 0.00","MYR 0.00","jkjasd;fsda");
fxdata[14]= new Array("03069
IPOWER","Buy","Cancelled","20/08/2007 07:20:54 PM","Day","0
0.38","0 0.00","MYR 0.00","jkjsdlkfjsdaf");
fxdata[15]= new Array("12651
MRCB","Buy","Replaced","20/08/2007 05:31:59 PM","Day","900 2.35","0
0.00","MYR 0.00","upuewoirwe");
var mdtgrid:DataGrid;
_root.createEmptyMovieClip("displayobj1",
_root.getNextHighestDepth(),{_x:0,_y:0});
initial();
function initial(){
_root.mdtgrid =
_root.createClassObject(mx.controls.DataGrid, "xxx",
_root.getNextHighestDepth());
_root.mdtgrid.doLater(_root,"setData");
function setData(){ //insert data to datagrid
var temp:Array = new Array();
for (var i in _root.fxdata){
temp
= new Object();
for (var j in _root.fxdata){
temp
[j] = _root.fxdata[j];
_root.mdtgrid.dataProvider =temp;
_root.mdtgrid.doLater(_root,"setdgStyle");
function setdgStyle(){
var rowhight = 40;
var noofrow = 8;
var headerheight = 35;
var gridheight = (rowhight * noofrow) + headerheight ;
_root.mdtgrid.setSize(800, gridheight);
_root.mdtgrid.rowHeight =rowhight;
_root.setHeader(_root.header.split(","));
_root.setWidth(_root.wid.split(","));
_root.setAlign(_root.alig.split(","));
_root.mdtgrid.invalidate();
function setHeader(datasource:Array){ //set header label
var leng:Number = _root.mdtgrid.columnCount;
var sleng:Number = datasource.length;
var temp:Object;
for (i =0 ;i<leng;i++){
if (i>=sleng){
break;
_root.mdtgrid.getColumnAt(i).headerText = datasource
function setWidth(datasource:Array){ //set columns width
var leng:Number = _root.mdtgrid.columnCount;
var sleng:Number = datasource.length;
var temp:Object;
for (i =0 ;i<leng;i++){
if (i>=sleng){
break;
_root.mdtgrid.getColumnAt(i).width = Number(datasource);
function setAlign(datasource:Array){ //set Alignment
var leng:Number = _root.mdtgrid.columnCount;
var sleng:Number = datasource.length;
var temp:Object;
for (i =0 ;i<leng;i++){
if (i>=sleng){
break;
temp = _root.mdtgrid.getColumnAt(i);
temp.setStyle("textAlign",trim(datasource

Anyone know how to fix it ?

I want to add DataGrid in my custom component as a child component,

I want to add DataGrid in my custom component as a child component, can we ?? or should i generate HTML for table creation in my custom component's renderer ?

I did that:
for example, if i want to add a Button control in my custom control:
public void encodeChildren( FacesContext context ) throws IOException
         super.encodeChildren( context );
        //createComponent raises exception.... invalid component type
        //UIComponent field = FacesContext.getCurrentInstance().getApplication().createComponent( javax.faces.component.html.HtmlInputText.class.getName() );
         HtmlInputText input = new HtmlInputText();
        getChildren().add( input );
    public boolean getRendersChildren()
        return true;
    }Can you give me any example, i want to add child components at run time basically..

Datagrid calculation

hai
i have one problem i want to add two column values and display sum of the value into thired column in the data grid
the two column value taken from external XML File

Hi.
Alex has some examples of how to make footers for DataGrids on his blog, you might find this interesting:
http://blogs.adobe.com/aharui/2007/04/datagrid_footers.html
http://blogs.adobe.com/aharui/2008/03/flex_3_datagrid_footers.html

Multiple column headers in a single DataGrid?

Suppose i wanted to display information on, say, invoices.
So, i want to display one part of my DataGrid with only invoices from the last 30 days, the next section for 30-60 days old, and the third section is 90 days+ old.
I want it to look, basically, like this:
30 Days or less
Customer         Days Old         amount
Mr. X cleaning           15                20.76
7-11                             3                   7.11
30-60 days old
Customer         Days Old         amount
Barney's                  75                 12.34
Watto's part shop    80              1200.89
90 days or older
Customer         Days Old         amount
Sprint                   144                  30.63
Is it possible to do this in a single DataGrid? I want the mulitple column headers, but want to be able to get rid of them and combine all this data into a single DataGrid with all invoices, if needs be. In that case all but the top column header titles would disappear.
Any info on this is appreciated.
thanks!

Hi,
You can do grouping with advance datagrid.
http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_02.html
Rgds
Johnny

Updating charts and datagrids based on selection

I am trying to find some documentation and samples explaining how I can pick something in a combobox and have it populate a series of datagrids and charts.
OUTLINE:
A. Using an XML table of all municipalities in our region populate a combobox. Then have the user select the municipality they are interested in.
B.Take a census table that is in XML format and by using HTTPServices read it into Flex and then based on what municipality the user selected populate a datagrid and variety of charts with data pertaining to the muni.
I know it is done because I see it all the time and took a class last week where it was shown. Unfortunately it was the last day of the class and time was running out so we just got a brief overview of this.
I would greatly appriciate anyone who can point me to samples and documentation whether it be online or in books. And I should mention that terminology is still an issue. Am I attempting to do a custom event or what?
The code below all works. What I mean I am successfully populating the combobox and the datagrid with the appropriate data. I am just not able to get the two communicating with each other. In other words the datagrid is showing the entire table and ignoring the combobox.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
   import mx.rpc.events.*;
   import mx.controls.*;
   import mx.charts.*;
   import mx.collections.*;
   [Bindable]
   private var acMuni:ArrayCollection = new ArrayCollection;
   [Bindable]
   private var acCity:ArrayCollection = new ArrayCollection;
   private function initApp():void {
    muniHS.send();
    cityHS.send();
   private function eHandler(e:ResultEvent):void {
    acMuni = e.result.GetAllMUNIS.MUNIS;
   private function fHandler(e:FaultEvent):void {
    var faultInfo:String="fault code: "+ e.fault.faultCode +"\n\n";
    faultInfo+="fault string: "+e.fault.faultString+"\n\n";
    mx.controls.Alert.show(faultInfo,"Fault Information");
    var eventInfo:String="event target: "+e.target+"\n\n";
    eventInfo+="event type: "+e.type+"\n\n";
    mx.controls.Alert.show(eventInfo,"Event Information");
   private function eCityHandler(e:ResultEvent):void {
    this.acCity = e.result.GetCITIES.CITIES;
]]>
</mx:Script>
<mx:HTTPService id="muniHS"
url="data/GetAllMunis.xml"
result="eHandler(event)"
fault="fHandler(event)"
showBusyCursor="true"/>
<mx:HTTPService id="cityHS"
url="data/CityNames.xml"
resultFormat="object"
result="eCityHandler(event)"
fault="fHandler(event)"
showBusyCursor="true"/>
<mx:Panel width="100%" height="50%"
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10" title="DataGrid">
<mx:ComboBox id="muniCB"
dataProvider="{acCity}"
prompt="Select a Municipality"
labelField="city"/>
<mx:DataGrid id="dg"
   width="100%"
   height="100%"
   dataProvider="{acMuni}">
   <mx:columns>
    <mx:DataGridColumn headerText="municipality" dataField="city"/>
    <mx:DataGridColumn dataField="year"/>
    <mx:DataGridColumn headerText="month" dataField="month_no"/>
    <mx:DataGridColumn headerText="labor force" dataField="laborforce"/>
    <mx:DataGridColumn dataField="employed"/>
    <mx:DataGridColumn dataField="unemployed"/>
    <mx:DataGridColumn headerText="unemployment rate" dataField="unemp_rate"/>
    <mx:DataGridColumn headerText="tract" dataField="geogkey"/>
    <mx:DataGridColumn headerText="extended tract" dataField="geogkeyx"/>
   </mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
Thanks for any help you can provide
Richard Krell

If this post answers your querstion or helps, please mark it as such.
First, use XMLListCollection for the data for the ConboBox and for the Muni result handler xlcMuni (instead of acMuni).
Here is a simplified version of your app with the answer. It uses e4x syntax for filtering.
http://livedocs.adobe.com/flex/3/html/help.html?content=13_Working_with_XML_03.html
--------------- CityNames.xml ----------------
<?xml version="1.0" encoding="utf-8"?>
<CITIES>
<city>Chicago</city>
<city>New York</city>
<city>Boston</city>
</CITIES>
---------- GetAllMunis.xml ------------
<?xml version="1.0" encoding="utf-8"?>
<MUNIS>
<muni>
    <city>Chicago</city>
    <year>1866</year>
</muni>
<muni>
    <city>New York</city>
    <year>1872</year>
</muni>
<muni>
    <city>Boston</city>
    <year>1756</year>
</muni>
</MUNIS>
------------- MainApp.mxml -------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="muniHS.send();cityHS.send();">
<mx:Script>
    <![CDATA[
      import mx.events.ListEvent;
      import mx.rpc.events.*;
      import mx.controls.*;
      import mx.charts.*;
      import mx.collections.*;
      [Bindable] private var xlcMuni:XMLListCollection = new XMLListCollection;
      [Bindable] private var xlcCity:XMLListCollection = new XMLListCollection;
      [Bindable] private var xlcDG:XMLListCollection = new XMLListCollection;
      private function eHandler(e:ResultEvent):void {
        this.xlcMuni = new XMLListCollection(e.result..muni);
      private function eCityHandler(e:ResultEvent):void {
        this.xlcCity = new XMLListCollection(e.result.city);
      private function populateDG(evt:ListEvent):void{
        var temp:XMLList = xlcMuni.copy();
        xlcDG = new XMLListCollection(temp.(city == ComboBox(evt.currentTarget).selectedItem));
    ]]>
</mx:Script>
<mx:HTTPService id="muniHS" resultFormat="e4x"
    url="data/GetAllMunis.xml" useProxy="false"
    result="eHandler(event)"/>
<mx:HTTPService id="cityHS" url="data/CityNames.xml"
    resultFormat="e4x" result="eCityHandler(event)"/>
<mx:Panel width="100%" height="50%" title="DataGrid">
    <mx:ComboBox id="muniCB" dataProvider="{xlcCity}"
      prompt="Select a Municipality" labelField="city"
      change="populateDG(event)"/>
    <mx:DataGrid id="dg" width="100%" height="100%"
      dataProvider="{xlcDG}">
      <mx:columns>
        <mx:DataGridColumn headerText="municipality" dataField="city"/>
        <mx:DataGridColumn dataField="year"/>
      </mx:columns>
    </mx:DataGrid>
</mx:Panel>
</mx:Application>

Using a DropDownList in a DataGrid, both with dynamically loaded content

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  xmlns:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx"
                         xmlns:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>

I just bought FlashBuilder 4.5 and even though I have been using ActionScript for years, I am having the hardest time to solve a seemingly simple task:
I have a database table with names of employees:
id
name
departmentid
1
Janet Jackson
2
2
Frank Zappa
2
3
John Travolta
1
in another table I have the departments
id
Department
1
Acting Department
2
Music Department
What I want is a DataGrid with a DropDownList itemRenderer for the Department so that I can selected the Department by name and not by id. This should be a no-brainer (and with HTML and PHP I have done that hundreds of times), but with Flex I can not figure out how to do this. This is what I have done so far:
Created the DataGrid, generated the database service and dragged it to the datagrid to bind the data. Works.
Then I created an itemRenderer for departmentid
In the department itemRenderer I dragged a DropDownList element, created a database service for the departments and dragged it onto that to get the databinding.
So far, so good. When I start it, I have a populated datagrid with a DropDownList that shows all available departments when I click on it.
What I need, of course, is that the Department DropDownList now shows the Department of the Employee row. When I change the Department in the DropDownList, it should update the Employee Database table.
I literally spend now days on trying to figure this out and can't find anything on the Internet that would help me. If you could give me some advise or even show me how the code needs to look, it would be GREATLY appreciated.
I am pasting here also the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  xmlns:employeeservice="services.employeeservice.*"
                  width="982" height="380" minWidth="955" minHeight="600">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               protected function dataGrid_creationCompleteHandler(event:FlexEvent):void
                    getAllEmployeeResult.token = employeeService.getAllEmployee();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllEmployeeResult"/>
          <employeeservice:EmployeeService id="employeeService"
                                                   fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                   showBusyCursor="true"/>
          
     </fx:Declarations>
     <s:DataGrid id="dataGrid" x="52" y="67" width="455"
                    creationComplete="dataGrid_creationCompleteHandler(event)" editable="true"
                    requestedRowCount="4">
          <s:columns>
               <s:ArrayList>
                    <s:GridColumn dataField="id" headerText="id"></s:GridColumn>
                    <s:GridColumn dataField="firstname" headerText="firstname"></s:GridColumn>
                    <s:GridColumn dataField="lastname" headerText="lastname"></s:GridColumn>
                    <s:GridColumn dataField="departmentid" editable="false" headerText="departmentid"
                                     itemRenderer="components.DepartmentDropDownList"></s:GridColumn>
               </s:ArrayList>
          </s:columns>
          <s:typicalItem>
               <fx:Object id="id1" departmentid="departmentid1" firstname="firstname1"
                            lastname="lastname1"></fx:Object>
          </s:typicalItem>
          <s:AsyncListView list="{getAllEmployeeResult.lastResult}"/>
     </s:DataGrid>
</s:Application>
Here the code of the itemRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx"
                         xmlns:departmentservice="services.departmentservice.*"
                         width="172" height="34" clipAndEnableScrolling="true">
     <fx:Script>
          <![CDATA[
               import mx.controls.Alert;
               import mx.events.FlexEvent;
               override public function prepare(hasBeenRecycled:Boolean):void {
                    lblData.text = data[column.dataField]
               protected function dropDownList_creationCompleteHandler(event:FlexEvent):void
                    getAllDepartmentResult.token = departmentService.getAllDepartment();
          ]]>
     </fx:Script>
     <fx:Declarations>
          <s:CallResponder id="getAllDepartmentResult"/>
          <departmentservice:DepartmentService id="departmentService"
                                                        fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)"
                                                        showBusyCursor="true"/>
     </fx:Declarations>
     <s:Label id="lblData" top="9" left="7"/>
     <s:DropDownList id="dropDownList" x="34" y="5" width="128"
                         creationComplete="dropDownList_creationCompleteHandler(event)"
                         labelField="department">
          <s:AsyncListView list="{getAllDepartmentResult.lastResult}"/>
     </s:DropDownList>
</s:GridItemRenderer>

Setting cell values in DataGrid

I have an application with a custom component called DataEntryDataGrid (which is a subclass of mx:DataGrid) that I based on this blog post: http://blogs.adobe.com/aharui/2008/03/custom_arraycollections_adding.html
The component works great, but in this particular datagrid I need some special functionality.   After the first row of data is entered and the user tabs into the next row, I need the first and second columns to be filled in based on the values of the previous row, and then I need it to automatically focus on the third column's cell. While the first and second columns should be still editable, they will be largely repetitive, and it would help if the users didn't have to enter the same numbers again and again. The first column in a new row should be the same value as the first column in the last row, and the second column in a new row should be (last row's value +1). Example:
DataGrid:
| Slide No. | Specimen No. | Age | Weight | Length |
|    1      |     1        | 5 | 65    | 40    | <- This row is manually entered, just text inputs
|    1*     |     2*       | # |        |        |
* = values set programatically, these cells should still be focusable and editable
# = this is where the focus should be
The problem I'm having is that when I tab into the next row, the first column value doesn't get set. The second column gets set to the correct value and displayed correctly, and the focus is set to the correct cell (the third column), but the first column remains empty. I'm not sure why this is. If I set a breakpoint in the code during the function focusNewRow() (which is called at the dataGrid's "itemFocusIn" event) the value of "slideNo" (first column) is set to the correct value, but after the "focusNewRow" functions finishes, a trace of dataProvider[the current row].slideNo shows the value is blank. Not null, just blank. Traces of all other columns show the correct values. Anyone have any ideas? Here's the code for my main application:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="components.*">
<fx:Script>
    <![CDATA[
      import mx.controls.DataGrid;
      import mx.events.DataGridEvent;
      public function traceSlideNo():void {
        var i:int;
        var g:Object = myDataGrid.dataProvider;
        for(i = 0; i < g.length -1; i++) {
          trace("sl: " + g[i].slideNo + ", sp: " + g[i].specimenNo + ", age: " + g[i].age);
      public function focusNewRow(e:DataGridEvent):void {
        if(e.currentTarget.dataProvider.length > 0 && e.rowIndex != 0 && e.columnIndex == 0) {
          var dg:DataGrid = e.currentTarget as DataGrid;
          var lastItem:Object = dg.dataProvider[e.rowIndex - 1];
          var targetItem:Object = dg.dataProvider[e.rowIndex];
          if(targetItem.specimenNo == "") {
            var focusCell:Object = new Object();
            focusCell.rowIndex = e.rowIndex;
            focusCell.columnIndex = 2;
            dg.editedItemPosition = focusCell;
            targetItem.slideNo = int(lastItem.slideNo);
            targetItem.specimenNo = int(lastItem.specimenNo) + 1;
            callLater(dg.dataProvider.refresh);
    ]]>
</fx:Script>
<components:DataEntryDataGrid x="10" y="10" width="450" id="myDataGrid" itemFocusIn="focusNewRow(event)"
                  editable="true" rowHeight="25" variableRowHeight="false">
    <components:columns>
      <mx:DataGridColumn headerText="Slide No." dataField="slideNo" editable="true"/>
      <mx:DataGridColumn headerText="Specimen No." dataField="specimenNo" editable="true"/>
      <mx:DataGridColumn headerText="Age" dataField="age" editable="true"/>
      <mx:DataGridColumn headerText="Weight" dataField="weight" editable="true"/>
      <mx:DataGridColumn headerText="Length" dataField="length" editable="true"/>
    </components:columns>
</components:DataEntryDataGrid>
<s:Button x="10" y="195" label="Trace Slide Numbers" click="traceSlideNo()"/>
</s:Application>
And here's the custom component, DataEntryDataGrid, just for reference (placed in the "components" package in this example) :
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init(event)"
       editable="true" wordWrap="true" variableRowHeight="true">
<fx:Declarations>
    
</fx:Declarations>
<fx:Script>
    <![CDATA[
      import components.NewEntryArrayCollection;
      import mx.controls.Alert;
      import mx.controls.dataGridClasses.DataGridColumn;
      import mx.events.DataGridEvent;
      import mx.events.DataGridEventReason;
      import mx.events.FlexEvent;
      import mx.utils.ObjectUtil;
      private var arr:Array = [];
      private var ac:NewEntryArrayCollection;
      private var dg:DataGrid;
      public var enableDeleteColumn:Boolean;
      private function generateObject():Object
        // Returns a new object to the datagrid with blank entries for all columns
        var obj:Object = new Object();
        for each(var item:Object in this.columns) {
          var df:String = item.dataField.toString();
          obj[df] = "";
        return obj;
      private function isObjectEmpty(obj:Object):Boolean
        // Checks to see if the current row is empty
        var hits:int = 0;
        for each(var item:Object in this.columns) {
          var df:String = item.dataField.toString();
          if(obj[df] != "" || obj[df] !== null) {
            hits++;
        if(hits > 0) {
          return false;
        return true;
      private function init(event:FlexEvent):void
        dg = this;                // Reference to the DataEntryDataGrid
        ac = new NewEntryArrayCollection(arr); // DataProvider for this DataEntryDataGrid
        ac.factoryFunction = generateObject;
        ac.emptyTestFunction = isObjectEmpty;
        dg.dataProvider = ac;
        // Renderer for the DELETE column and Delete Button Item Renderer
        if(enableDeleteColumn == true){
          var cols:Array = dg.columns;
          var delColumn:DataGridColumn = new DataGridColumn("del");
          delColumn.editable = false;
          delColumn.width = 35;
          delColumn.headerText = "DEL";
          delColumn.dataField = "delete";
          delColumn.itemRenderer = new ClassFactory(DeleteButton);
          cols.push(delColumn);
          dg.columns = cols;
          dg.addEventListener("deleteRow",deleteClickAccept);
      private function deleteClickAccept(event:Event):void { // Handles deletion of rows based on event dispatched from DeleteButton.mxml
        dg = this;
        ac = dg.dataProvider as NewEntryArrayCollection;
        if(dg.selectedIndex != ac.length - 1) {
          ac.removeItemAt(dg.selectedIndex);
          ac.refresh();
    ]]>
</fx:Script>
</mx:DataGrid>
Also, the file NewEntryArrayCollection.as which is referenced by the custom component. This also goes in the "components" package:
package components
import mx.collections.ArrayCollection;
public class NewEntryArrayCollection extends ArrayCollection
    private var newEntry:Object;
    // callback to generate a new entry
    public var factoryFunction:Function;
    // callback to test if an entry is empty and should be deleted
    public var emptyTestFunction:Function;
    public function NewEntryArrayCollection(source:Array)
      super(source);
    override public function getItemAt(index:int, prefetch:int=0):Object
      if (index < 0 || index >= length)
        throw new RangeError("invalid index", index);
      if (index < super.length)
        return super.getItemAt(index, prefetch);
      if (!newEntry)
        newEntry = factoryFunction();
      return newEntry;
    override public function get length():int
      return super.length + 1;
    override public function itemUpdated(item:Object, property:Object = null,
                       oldValue:Object = null,
                       newValue:Object = null):void
      super.itemUpdated(item, property, oldValue, newValue);
      if (item != newEntry)
        if (emptyTestFunction != null)
          if (emptyTestFunction(item))
            removeItemAt(getItemIndex(item));
      else
        if (emptyTestFunction != null)
          if (!emptyTestFunction(item))
            newEntry = null;
            addItemAt(item, length - 1);
Sorry for the length of this post, but I hate seeing people post without including enough information to solve the problem. If there's anything I've left out, let me know.

Problem solved. Actually, the NewEntryArrayCollection pointed to an outside function within the DataEntryDataGrid component to be used as a factory function for new objects. I just set the factory function to scan the previous row's values and base the new row's values off of them. Thanks again, Flex!
New private function generateObject() to replace the previous one in DataEntryDataGrid.mxml, just in case others are curious:
private function generateObject():Object
// Returns a new object to the datagrid with filled in slide and
// specimen no. columns and the rest of the columns blank
var obj:Object = new Object();
var thisDP:Object;
for each(var item:Object in this.columns) {
    var df:String = item.dataField.toString();
    if(df == "slideNo") {
      thisDP = this.dataProvider;
      var newSlideNo:int;
      if(thisDP.length > 1) {
     // looking for the last row of the DataGrid's dataProvider, but as
        // length is calculated differently in NewEntryArrayCollection.as
        // to account for the "dummy" row, we need to go back 2 rows.
        newSlideNo = int(thisDP[thisDP.length -2].slideNo);
      } else {
        newSlideNo = 1;
      obj[df] = newSlideNo;
    } else if(df == "specimenNo") {
      thisDP = this.dataProvider;
      var newSpecimenNo:int;
      if(thisDP.length > 1) {
        newSpecimenNo = int(thisDP[thisDP.length -2].specimenNo) + 1;
      } else {
        newSpecimenNo = 1;
      obj[df] = newSpecimenNo;
    } else {
      obj[df] = "";
return obj;

Direction Needed: Storing calculated values from datagrid column in order to call values into graph

Hi all,
I am new to Flex/Flash Builder, actionscript, and mxml, so please be kind.
I have developed a small program that has a component that displays a datagrid fed with information out of a mysql db via a php data services connection. Within that same component (page), I have a graph that charts the dates via a plot chart. I am interested in adding a line series to the graph, but the data I want to use is a calculated field in the datagrid which I used a custom lable function to derive and display. Can someone steer me to the correct method to store such values and how to call them into a chart?
Some addition information
Custom label function:
/* Custom label function for the Delta1 column. Calculates the number of days between the planting date and 10% flower. */
                              private function calculateTo1stFlower(item:Object, column:GridColumn):String {
                                        var tempDate1:Date = new Date(item.dflower10 - item.dplanting);
                                        return Math.round((tempDate1.time / MS_PER_DAY) + 1).toString();
/* Number of milliseconds in a day. (1000 milliseconds per second * 60 seconds per minute * 60 minutes per hour * 24 hours per day) */
                              private const MS_PER_DAY:uint = 1000 * 60 * 60 * 24;
Within my spark datagrid
<s:GridColumn width="30" headerText="Δ1" labelFunction="calculateTo1stFlower" ></s:GridColumn>
I assume I need to store the array of values for this column and then chart the saved values as the xField within the LineSeries. Should I use a class based model?
The following link seemed like it may be an appropriate path; I am not sure though.
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7b51.html
Thanks in advance for any support,
Matthew

Thanks for trying to post DDL, but you have no idea how to do a data model. You do not know that tables have to have keys, what ISO-11179 is, etc.
You have a table that is supposed to model companies. Your singular names says that there is only one company! There is no company identifier (the industry standard is the DUNS). A customer is not a company. We do not use numeric data types for identifiers;
do you do math on them? NO! The attribute property comes after the attribute name (you never heard of ISO-11179).
Think about how silly VARCHAR(1) is.
CREATE TABLE Companies
(company_duns CHAR(9) NOT NULL PRIMARY KEY,
company_name VARCHAR(30)NOIT NULL,
margin_oil INTEGER NOT NULL,
margin_hangar INTEGER NOT NULL,
margin_cleaning INTEGER NOT NULL);
INSERT INTO Companies
VALUES (1, 'AviatKorea', 100, 125, 200),
(2, 'AXHollande', 50, 40, 30),
(3, 'BFXNorway', 60, 80, 600),
(4, 'EEEFrance', 10, 25, 60);
CREATE TABLE Company_Tariffs
(company_duns INTEGER NOT NULL
REFERENCES Companies(company_duns),
tariff_type CHAR(1) NOT NULL
CHECK (tariff_type IN ('A','B','C','D'),
PRIMARY KEY (company_duns, tariff_type));
INSERT INTO Company_Tariffs values (1, 'A'), (2, 'C'), (2, 'D'), (3, 'A'), (4, 'A'), (4, 'C'), (4, 'D')
SELECT * -- do not use * in production code
FROM Companies AS C,
Company_Tariffs AS T
WHERE C.company_duns = T.company_duns;
>> I would like something like with a computed column [ ] that retrieves the different contracts used: <<
You might but a SQL programmer would not. This violated First Normal Form. It is a display report and is done in the presentation layers.
--CELKO-- Books in Celko Series for Morgan-Kaufmann Publishing: Analytics and OLAP in SQL / Data and Databases: Concepts in Practice Data / Measurements and Standards in SQL SQL for Smarties / SQL Programming Style / SQL Puzzles and Answers / Thinking
in Sets / Trees and Hierarchies in SQL

How to display data from local csv files (in a folder on my desktop) in my flex air application using a datagrid?

Hello, I am very new to flex and don't have a programming background. I am trying to create an air app with flex that looks at a folder on the users desktop where csv files will be dropped by the user. In the air app the user will be able to browse and look for a specific csv file in a list container, once selected the information from that file should be displayed in a datagrid bellow. Finally i will be using Alive PDF to create a pdf from the information in this datagrid laid out in an invoice format. Bellow is the source code for my app as a visual refference, it only has the containers with no working code. I have also attached a sample csv file so you can see what i am working with. Can this be done? How do i do this? Please help.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="794" height="666">
    <mx:Label x="280" y="19" text="1. Select Purchase Order"/>
    <mx:List y="45" width="232" horizontalCenter="0"></mx:List>
    <mx:Label x="158" y="242" text="2. Verify Information"/>
    <mx:DataGrid y="268" height="297" horizontalCenter="0" width="476">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:Label x="355" y="606" text="3. Generated PDF"/>
    <mx:Button label="Click Here" horizontalCenter="0" verticalCenter="311"/>
</mx:WindowedApplication>

Open the file, parse it, populate an ArrayCollection or XMLListCollection, and make the collection the DataGrid dataProvider:
http://livedocs.adobe.com/flex/3/html/help.html?content=Filesystem_08.html
http://livedocs.adobe.com/flex/3/html/help.html?content=12_Using_Regular_Expressions_01.ht ml
http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_6.html
http://livedocs.adobe.com/flex/3/langref/mx/collections/ArrayCollection.html
http://livedocs.adobe.com/flex/3/langref/mx/collections/XMLListCollection.html
If this post answered your question or helped, please mark it as such.

HTML in DataGrid

Similar Messages

Maybe you are looking for