ItemRenderer DataGridColumn with AS

Hi all,
I need to build DataGrid in ActionScript, where is a column
with image. Something like
<mx:DataGrid id="DataGrid1" rowCount="8"
dataProvider="{mainListCollection}">
<mx:DataGridColumn itemRenderer="mx.controls.Image"
headerText="Type" dataField="fileIcon" />
</mx:DataGrid>
When I run my application with AS code
DataGridColumn2.headerText = "Type";
DataGridColumn2.dataField = "fileIcon";
DataGridColumn2.itemRenderer = new
ClassFactory(mx.controls.Image);
DataGrid1.columns =
[DataGridColumn1,DataGridColumn2,DataGridColumn3];
I see in column 2 (Type) only a broken image.
How can I do it, please?
Cheers Petr

Hi Kiran,
Check the below link, a nice walkthrough of itemEditors and itemRenderers:
http://www.adobe.com/devnet/flex/articles/itemeditors_pt3.html
Thanks,
Bhasker Chari

Similar Messages

How populate itemrenderer items with data.

How populate itemrenderer items with data. Ie after my app starts I generate an array collection that I want to assign as the data provider to each combobox in my item renderer, which im using in a datagrid.

<?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">
    <fx:Declarations>
        
        <s:ArrayCollection id="booksWithStores">
            <fx:Object name="book1" stores="{new ArrayCollection(['store1','store2'])}"/>
            <fx:Object name="book2" stores="{new ArrayCollection(['store1','store3'])}"/>
            <fx:Object name="book3" stores="{new ArrayCollection(['store2','store3', 'store4'])}"/>
            <fx:Object name="book4" stores="{new ArrayCollection(['store1','store4'])}"/>
        </s:ArrayCollection>
        <s:ArrayCollection id="booksWithoutStores">
            <fx:Object name="bookA"/>
            <fx:Object name="bookB"/>
            <fx:Object name="bookC"/>
            <fx:Object name="bookD"/>
        </s:ArrayCollection>
        <s:ArrayCollection id="allStores">
            <fx:String>store1B</fx:String>
            <fx:String>store2B</fx:String>
            <fx:String>store3B</fx:String>
            <fx:String>store4B</fx:String>
        </s:ArrayCollection>
        <fx:Component id="renderer1" className="Renderer1">
            <s:MXDataGridItemRenderer>
                <s:DropDownList dataProvider="{data.stores}" />
            </s:MXDataGridItemRenderer>
        </fx:Component>
        <fx:Component id="renderer2" className="Renderer2">
            <s:MXDataGridItemRenderer>
                <s:DropDownList dataProvider="{storesList}" />
                <fx:Script>
                    <![CDATA[
                        import mx.collections.ArrayCollection;
                        [Bindable]
                        public var storesList:ArrayCollection;
                    ]]>
                </fx:Script>
            </s:MXDataGridItemRenderer>
        </fx:Component>
    </fx:Declarations>
    <mx:Form>
        <mx:FormItem label="Dynamic Stores">
            <mx:DataGrid dataProvider="{booksWithStores}" width="354">
                <mx:columns>
                    <mx:DataGridColumn dataField="name"/>
                    <mx:DataGridColumn dataField="stores" itemRenderer="{renderer1}"/>
                </mx:columns>
            </mx:DataGrid>
        </mx:FormItem>
        <mx:FormItem label="Static Stores">
            <mx:DataGrid dataProvider="{booksWithoutStores}" width="354">
                <mx:columns>
                    <mx:DataGridColumn dataField="name"/>
                    <mx:DataGridColumn dataField="stores" itemRenderer="{createRendererWithProperties(Renderer2, {storesList:allStores})}"/>
                </mx:columns>
            </mx:DataGrid>
        </mx:FormItem>
    </mx:Form>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            public static function createRendererWithProperties(renderer:Class, properties:Object):IFactory
                var factory:ClassFactory=new ClassFactory(renderer);
                factory.properties=properties;
                return factory;
        ]]>
    </fx:Script>
</s:Application>

ItemRenderer Issue with DataGrid and Label

<mx:DataGrid width="100%" height="100%" rowCount="5" dataProvider="{publish_status}">
     <mx:columns>
          <mx:DataGridColumn dataField="status" headerText="Status">
               <mx:itemRenderer>
                    <fx:Component>
                         <mx:Label text="{data.status}" fontSize="12">
                              <fx:Script>
                                   <![CDATA[
                                   override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                                   super.updateDisplayList(unscaledWidth, unscaledHeight);
                                   if(this.text == "A"){
                                        setStyle("color", "blue");
                                   else if(this.text == "B"){
                                             setStyle("color", "green");
                                   else if(this.text == "C"){
                                        setStyle("color", "red");
                                   else{
                                        setStyle("color","white");
                                   ]]>
                              </fx:Script>
                         </mx:Label>
                    </fx:Component>
               </mx:itemRenderer>
          </mx:DataGridColumn>
     </mx:columns>
</mx:DataGrid>
I created an inline ItemRenderer as above. I understand that it gets recycled and have included the last "else" statement to return color to default if all tests fail. The problem is that the text is still showing up in the wrong colors. I have done a lot of reading on the forums but I can't figure out what I'm missing.
Thanks.
Btw, I am using Flash Builder 4.

Hi ,
Try changing the color in set data function override method instead of updateDisplayList override.
override public function set data(value:Object):void
     if(this.text == A){
        setStyle(color, blue);
   else if(this.text == B){
        setStyle(color, green);
   else if(this.text == C){
        setStyle(color, red);
   else{
        setStyle(color,white);
Thanks,
Bhasker

ItemRenderer Flicker with Data Binding

In my flex application, I've got a couple of nested
itemRenderer's. Their dataProvider is XML. Anytime the XML changes
the itemRenderer's flicker in the application. Is there a way to
prevent the flicker?

"BrentLamborn" <[email protected]> wrote in
message
news:g6pttk$sq3$[email protected]..
> In my flex application, I've got a couple of nested
itemRenderer's. Their
> dataProvider is XML. Anytime the XML changes the
itemRenderer's flicker in
> the
> application. Is there a way to prevent the flicker?
If you assign your dataproviders rather than binding, this
will be reduced.
HTH;
Amy

Problem with checkbox item renderer in datagrid

I have a data grid having check box as an item renderer. I have viewed many posts in this forum but nothing useful in my case. I am failed to bind my datagrid itemrenderer checkbox with the field of dataprovider i.e. listUnitMovement.CHECK_PATH. Then I have to traverse data provider to check which checkboxes are checked.
[Bindable]
var listUnitMovement:XMLList=null;
In a function call
public function init(event:ResultEvent):void
    listUnitMovement=event.result.unitmovement;
     <mx:DataGrid id="dg_country"
                           dataProvider="{listUnitMovement}"
                              enabled="true">
                            <mx:columns>
                               <mx:DataGridColumn>
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:CheckBox selectedField="CHECK_PATH" />
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                                <mx:DataGridColumn headerText="Latitude" dataField="NEW_LAT" visible="false"/>
                                <mx:DataGridColumn headerText="Longitude" dataField="NEW_LONG" visible="false"/>
                               <mx:DataGridColumn>
                                    <mx:itemRenderer>
                                        <mx:Component>
                                            <mx:Button label="Details"/>
                                        </mx:Component>
                                    </mx:itemRenderer>
                                </mx:DataGridColumn>
                            </mx:columns>
                        </mx:DataGrid>

Hi,
Do you want to just check/uncheck the checkboxes based on the CHECK_PATH field.
Do you want something like this...
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;[
Bindable]
private var listUnitMovement:ArrayCollection = new ArrayCollection([{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:true,NEW_LAT:109.233,NEW_LONG:232.22},{CHECK_PATH:false,NEW_LAT:133.233,NEW_LONG:702.22}]);]]>
</mx:Script>
<mx:DataGrid dataProvider="{listUnitMovement}">
<mx:columns>
<mx:DataGridColumn>
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="CHECK_PATH" change="data.CHECK_PATH=selected" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="NEW_LAT"/>
<mx:DataGridColumn dataField="NEW_LONG"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
Please let me know clearly what's your problem...Do you want to just bind the check box based on XmlList or something else..?
Thanks,
Bhasker Chari.S

Problem with renderer and styleName

I have a DataGridColumn with a custom renderer. The renderer
extends VBox. Inside the renderer if I use setStyle() to
individually set some styles, it works fine and the styles look
good. But if I use
this.styleName = "theName"
where theName is defined in a CSS file, it's not working. My
CSS styles are working for other components but not the renderer.
Is there some trick to getting a styleName to work inside a
renderer? Thanks.

I have a DataGridColumn with a custom renderer. The renderer
extends VBox. Inside the renderer if I use setStyle() to
individually set some styles, it works fine and the styles look
good. But if I use
this.styleName = "theName"
where theName is defined in a CSS file, it's not working. My
CSS styles are working for other components but not the renderer.
Is there some trick to getting a styleName to work inside a
renderer? Thanks.

Setting maxChars in an editable DataGridColumn

I have a DataGridColumn with its editable property set to
true.
Users should only be allowed to enter a max of 30 characters
in this field.
How do I set this?
Thanks

Hi Tracy,
DataGrid doesn't have a maxChars attribute but I did find a
solution that works here:
http://www.richinternet.de/blog/index.cfm?entry=1A9BC4E5-E330-9F94-F90F54F91CB45C16

Set Spark TabBar ItemRenderer State

I have a custom ItemRenderer for a tabBar and I need to be able to control the state of each itemRenderer on the tabBar individually. For example, if a change is made to the data in one of the tabs, I want to change the display of the tab to the "unsaved" state, so that a user has a visual cue when there are usaved edits.
<?xml version="1.0" encoding="utf-8"?><s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="
library://ns.adobe.com/flex/spark"xmlns:mx="
library://ns.adobe.com/flex/mx"top="
2" width="200" height="34" autoDrawBackground="false" buttonMode="true">
<s:states>
<s:State name="normal"/>
<s:State name="selected"/>
<s:State name="hovered"/>
<s:State name="unsaved"/>
</s:states>

<s:Rect left="1" right="1" top="1" bottom="0" radiusX="5" radiusY="5">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xffffff"/>
<s:GradientEntry color="0xd8d8d8" alpha="0.85" color.selected="0xf76a6a" alpha.selected="1.0" color.hovered="0x929496" alpha.hovered="0.85"/>
</s:LinearGradient>
</s:fill>
</s:Rect>

<s:Line left="0" right="0" top="1">
<s:stroke>
<s:SolidColorStroke weight="1" alpha="1.0" color="0x999999"/>
</s:stroke>
</s:Line>
<s:Line left="0" bottom="0" top="1">
<s:stroke>
<s:SolidColorStroke weight="1" alpha="1.0" color="0x999999"/>
</s:stroke>
</s:Line>
<s:Line right="0" bottom="0" top="1">
<s:stroke>
<s:SolidColorStroke weight="1" alpha="1.0" color="0x999999"/>
</s:stroke>
</s:Line>
<s:Line left="0" right="0" bottom="0">
<s:stroke>
<s:SolidColorStroke weight="1" alpha="1.0" color="0x999999" alpha.selected="0.0" color.selected="0xffffff"/>
</s:stroke>
</s:Line>
<s:Label left="4" right="20" fontSize="14" text="{data.LastName}, {data.FirstName}"verticalCenter="
0"/>
<s:Label id="closePtX" right="5" top="5" fontSize="14" fontWeight="bold" text="x"/></s:ItemRenderer>

hi,
With state transitions a lot of the smarts are already built in, when fading for instance the transition knows when to fade in or fade out, getting your components placed in the states you want is all that is needed.
This is a simple example but as you can see there is virtually no code involved..
http://gumbo.flashhub.net/cyber/ source included
David.

Class object from XML.

Hi.
I want to create DataGrid with itemReneder for each column.
This is inline generated itemRenderer:
DataGridColumn.itemRenderer = new
ClassFactory(MyCustomClass);
// MyCustomClass - it manually generated class which contains
some form items(TextInput, Combox..e.t.c.)
I want to consturct ItemRenderer dynamicly. For this i need
to create Class object and send it to itemRenderer:
var component:DynamicFormClass = new DynamicFormClass();
var newComponent:Class =
component.someMethodWhichWillCreateForm(configData); // - this will
return Class which will generate form items that described in
configData
DatagridColumn.itemRenderer = new ClassFactory(newComponent);
This code is how i see solvetion of this problem, but this
doesnt work.
I really don't know how it to create and will be very
thankful for any dicision and answers how to make it.
Thank you.

"Dmitry Sergeev" <[email protected]> wrote
in message
news:g8eghj$881$[email protected]..
> Hi.
> I want to create DataGrid with itemReneder for each
column.
>
> This is inline generated itemRenderer:
> DataGridColumn.itemRenderer = new
ClassFactory(MyCustomClass);
> // MyCustomClass - it manually generated class which
contains some form
> items(TextInput, Combox..e.t.c.)
>
> I want to consturct ItemRenderer dynamicly. For this i
need to create
> Class
> object and send it to itemRenderer:
> var component:DynamicFormClass = new DynamicFormClass();
> var newComponent:Class =
> component.someMethodWhichWillCreateForm(configData);
> // - this will return Class which will generate form
items that described
> in
> configData
> DatagridColumn.itemRenderer = new
ClassFactory(newComponent);
Use getDefinitionByName and ClassFactory to dynamically
create your class.
Just be sure that you actually have at least one "hard"
reference to each
class you intend to use, or the class might not get compiled
into your swf.
Here's a full write-up of how to do that:
http://www.paulofierro.com/archives/520/
HTH;
Amy

Question about Using States in DataGrid Item Renderer

I have a DataGridColumn with an ItemRenderer that extends the
Box component. The default display is a Text component. When the
user clicks on the text component, I change the State to add a
PopUpMenuButton child, and make the Text component invisible. This
works fine. However, I only want to allow one PopUpMenuButton to be
visible in the DataGrid at a time (similar to how an itemEditor
works). I don't want to use an itemEditor, because I've run into
too many problems trying to get that to work in this instance.
I am implementing IDropInListItemRenderer in my itemRenderer,
in order to access the listData property, which will give me the
owner (DataGrid), but I don't know how to "turn off" the "editing"
state in other itemRenderers in the DataGrid.
How can I accomplish this?
Thanks.

Here we go. I simply added an Listener for Change Events in
the listData.owner - if it is triggered, i update the currentState
to null. Works like a charm. Much easier than trying to access the
itemRenderers in the column and resetting them all. Better on
performance too.

Labelfunction in a datagrid

maybe someone can help me out with this... i am able to get a labelfunction to work fine (it sums the totals of the dataprovider) like so:
in my datagridcolumn with id = "grid1" i have labelFunction="sumFunction"
my sumFunction looks like this:
        public function sumFunction(col:DataGridColumn):String
            var n:int = grid1.dataProvider.length;
            var sum:Number = 0;
            for (var i:int = 0; i < n; i++)
                sum += grid1.dataProvider[i][col.dataField];
            return parentApplication.currencyFormatter.format(sum);//.toFixed(2);
but i find i need to create a sumFunction for every datagrid with a different ID and i'm going to have many. i want to be able to reuse code (best practice) and reuse the same function for all grids. the problem is i dont know which grid to loop over the dataprovider for and return the result to. so i started doing something like this:
        public function sumFunction(dgName:String,col:DataGridColumn):String
            var n:int = this[dgName]dataProvider.length;
            var sum:Number = 0;
            for (var i:int = 0; i < n; i++)
                sum += int(this[dgName]dataProvider[i][col.dataField]);
            return parentApplication.currencyFormatter.format(sum);
but then my labelfunction needs another argument/parameter passed to it. oddly enough why doesn't the labelFunction work without passing in the col:DataGridColumn in the first example but now it doesnt once i add another argument/parameter to the function?
i was expecting this to then work if i changed the labelfunction on each datagrid to pass the id of the datagrid to let the sumFunction know which one to use:
labelFunction="sumFunction('grid2')"
this throws an error that i need another argument/parameter but i dont know what to pass in. i'm also getting errors about a string... anyone know how i can accomplish this?

but i'm not within that packaged AS file... i'm in an MXML file that uses it like this:
    <local:FooterDataGrid id="ptqGrid" x="10" y="487" width="940" itemClick="itemClickEvent('ptqGrid',event);" dataProvider="{parentApplication.Service.perfToQuota.lastResult}" rowCount="5">
        <local:columns>
            <local:FooterDataGridColumn headerText="Quota Description" width="180" dataField="quota_desc">
                <mx:DataGridColumn headerText="Totals:" width="180" textAlign="right"/>
            </local:FooterDataGridColumn>
            <local:FooterDataGridColumn headerText="Quota" dataField="quota" labelFunction="{parentApplication.price_labelFunc}" textAlign="right" >
                <mx:DataGridColumn labelFunction="sumFunction" dataField="quota" textAlign="right" />
            </local:FooterDataGridColumn>
            <local:FooterDataGridColumn headerText="Total Revenue" labelFunction="{parentApplication.price_labelFunc}" textAlign="right" dataField="tot_rev">
                <local:itemRenderer>
                <mx:Component>
                <mx:Label text="{parentApplication.currencyFormatter.format(data.tot_rev)}" textAlign="right" color="#0000FF"
                styleName="lblNoUnderline" buttonMode="true" useHandCursor="true"
                mouseOver="styleName='lblUnderline';" mouseChildren="false"
                mouseOut="styleName='lblNoUnderline';"/>
                </mx:Component>
                </local:itemRenderer>
                <mx:DataGridColumn labelFunction="sumFunction" dataField="tot_rev" textAlign="right" />
            </local:FooterDataGridColumn>
            <local:FooterDataGridColumn headerText="Target Earnings" textAlign="right" labelFunction="{parentApplication.price_labelFunc}" dataField="trgt_earn">
                <mx:DataGridColumn labelFunction="sumFunction" dataField="trgt_earn" textAlign="right" />
            </local:FooterDataGridColumn>
            <local:FooterDataGridColumn headerText="Total Earnings" textAlign="right" labelFunction="{parentApplication.price_labelFunc}" dataField="tot_earn">
                <local:itemRenderer>
                <mx:Component>
                <mx:Label text="{parentApplication.currencyFormatter.format(data.tot_earn)}" textAlign="right" color="#0000FF"
                styleName="lblNoUnderline" buttonMode="true" useHandCursor="true"
                mouseOver="styleName='lblUnderline';" mouseChildren="false"
                mouseOut="styleName='lblNoUnderline';"/>
                </mx:Component>
                </local:itemRenderer>
                <mx:DataGridColumn labelFunction="sumFunction" dataField="tot_earn" textAlign="right" />
            </local:FooterDataGridColumn>
            <local:FooterDataGridColumn headerText="Achievement" textAlign="right" dataField="ach">
                <mx:DataGridColumn labelFunction="averageFunction" dataField="ach" textAlign="right" />
            </local:FooterDataGridColumn>
        </local:columns>
    </local:FooterDataGrid>
and here is my sumFunction that is giving me the problem and does not have access to the owner property:
        public function sumFunction(col:FooterDataGridColumn):String
            var n:int = ptqGrid.dataProvider.length;
            var sum:Number = 0;
            for (var i:int = 0; i < n; i++)
                sum += int(ptqGrid.dataProvider[i][col.dataField]);
            return parentApplication.currencyFormatter.format(sum);//.toFixed(2);

Apply Image to datagrid row

hi
i have one problem i need to apply image to selected row in
datagrid dynamically we have
"selectedcolor" but i need to apply image to selected row is
there any way please help me
client requires this effect
karthik.k

hi thanks for the reply i am posting sample code
<DataGrid id="dg_getData1" backgroundColor="0x87A3B7"
selectionColor="0xE4C38D" verticalScrollPolicy="off"
horizontalScrollPolicy="off" itemClick="getIdForPresenter()"
wordWrap="true" width="100%" verticalGridLines="false"
backgroundAlpha="0.3" headerHeight="0" fontSize="20" rowHeight="53"
dataProvider="{model.filteredCollection}" useRollOver="false"
horizontalGridLineColor="0xFFFFFF" horizontalGridLines="true">
<columns>
<DataGridColumn width="30" dataField="sessionTimes" >
<itemRenderer>
<Component>
<HBox horizontalScrollPolicy="off">
<Script>
<![CDATA[
import mx.controls.Alert;
override public function set data(value:Object):void
var s_String1:String;
var s_String2:String;
var s_String3:String;
var num:Number
super.data=value;
s_String1=sessionTimes.text;
var arr_Array:Array=s_String1.split(" /");
for(var i:int;i<arr_Array.length;i++)
s_String3=arr_Array[0]
sessionTime.text=s_String3
s_String2=arr_Array[1];
/* num=arr_Array[2]
if(num%2==0)
setStyle("backgroundColor",0x8EA9BB);
else
setStyle("backgroundColor",0x6B8FAB);
if(s_String2=="NOT RECEIVED")
sessionTime.styleName='textcolor';
else
sessionTime.styleName='textcolor1';
]]>
</Script>
<Label id="sessionTime" />
<Text id="sessionTimes" text="{data.sessionTimes}"
visible="false"/>
</HBox>
</Component></itemRenderer>
</DataGridColumn>
</DataGrid>
i am using itemrenderer i need to place an image and when
that row is clicked i need to display image for the row clicked and
when next row clicked previously clicked image should disappear and
currently clicked row should be displayed with image(every thing
dynamically)
only option i saw is "selectionColor="0xE4C38D" but i don't
know how to place image instead of "selectionColor" for button we
have style effect (upskin, downskin) where we can embed image but
in datagrid any option like that,
any idea this requirement is severe
please help me
karthik

Binding Datagrid XML Data

Hi,
Summary: I cannot get my DataGrid binding with XML data.
Specifically, I cannot bind a DataGridColumn with a child of a
child using the dataField property. However, I can bind with a
direct child.
I'm currently building an application where I retrieve data
from a XML database and contact it through posting a XQuery to the
database. I set the resultFormat of my HTTPServer to "e4x".
quote:
<mx:HTTPService id="searchRequest" url="
http://localhost:8080/exist/rest/db/"
contentType="application/xml" useProxy="false"
method="POST" resultFormat="e4x" />
I receive this data:
quote:
<exist:result exist:hits="1" exist:start="1"
exist:count="1" xmlns:exist="
http://exist.sourceforge.net/NS/exist">
<schedule>
<tournament>
<sport>Testing Our DTD</sport>
<tname>Well-formed Document</tname>
<match>
<mdate>Oct. 12, 2007</mdate>
<competitor>
<cname>sd</cname>
<score>2</score>
</competitor>
<competitor>
<cname>sdgs</cname>
<score>3</score>
</competitor>
<location>
<city>San Luis Obispo</city>
<state>CA</state>
<country>USA</country>
<stadium>Test Stadium, OPTIONAL</stadium>
</location>
<tv>SVN</tv>
<description>Basic testing...</description>
</match>
</tournament>
</schedule>
</exist:result>
I receive the data fine however, I cannot nested
elements of the XML nodes I retrieve. Here is my data grid.
quote:
<mx:DataGrid id="grid" width="446" height="100%"
dataProvider="{searchRequest.lastResult.schedule.tournament.match}"
enabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Tournament" />
<mx:DataGridColumn headerText="Match Date"
dataField="mdate" />
<mx:DataGridColumn headerText="Sport" />
<mx:DataGridColumn headerText="City"
dataField="location.city"/>
<mx:DataGridColumn headerText="State"
dataField="location.state"/>
</mx:columns>
</mx:DataGrid>
The 'mdate' shows up however, 'location.city'
and 'location.state' do not. I am not sure how the dataField works.
Does it get the 'current' node and allow me to drill down in the
XML node?
I will note that I can get it working with a labelFunction
and an ItemRenderer. I feel that using either of those methods for
this is a bit verbose.

The default DGColumn picks up the property value by doing
data[dataField]. Due to this the nested value would not be picked
up.
By extending DGColumn and overriding the itemToLabel function
it is possible to get the desired functionality by adding code to
detect "field1.field2" kind of dataField value and returning the
nested value.
This custom DGColumn can be used whererever the functionality
is desired.

DataGrid selection indicate by CheckBoxes

My custom DataGrid class:
package ua.org.enginer.controls {
     import flash.events.KeyboardEvent;
     import mx.collections.ArrayCollection;
     import mx.controls.DataGrid;
     import mx.controls.dataGridClasses.DataGridColumn;
     import mx.core.ClassFactory;
     import mx.events.ListEvent;
     import ua.org.enginer.controls.renderers.DataGridSelectionIndicator;
      * [a] key for select all (like [Ctrl+a])
      * Indicate selection by CheckBoxes
     public class CheckSelectionDataGrid extends DataGrid {
          public function CheckSelectionDataGrid() {
               super();
               addEventListener(KeyboardEvent.KEY_DOWN, onKetDown)
               function onKetDown(event:KeyboardEvent):void {
                    //if (event.ctrlKey && event.keyCode == 65) {
                    // My lovely IE do not pass [Ctrl+A]... so simply [a]
                    if (event.keyCode == 65) {
                         selectedItems = ArrayCollection(collection).source
                         dispatchEvent(new ListEvent(ListEvent.ITEM_CLICK))
          // add DataGridColumn with checkBoxes
          override public function set columns(value:Array):void {
               var selectionIndicators:DataGridColumn = new DataGridColumn()
               selectionIndicators.itemRenderer = new ClassFactory(DataGridSelectionIndicator)
               selectionIndicators.width = 20
               selectionIndicators.sortable = false
               selectionIndicators.resizable = false
               value.push(selectionIndicators)
               super.columns = value
          override public function set selectedItems(items:Array):void {
               super.selectedItems = items
               // for checkBoxes indication
               dispatchEvent(new ListEvent(ListEvent.CHANGE))
          override public function set selectedIndices(indices:Array):void {
               super.selectedIndices = indices
               // for checkBoxes indication
               dispatchEvent(new ListEvent(ListEvent.CHANGE))
DataGridSelectionIndicator:
package ua.org.enginer.controls.renderers {
     import flash.events.Event;
     import mx.controls.CheckBox;
     import mx.controls.DataGrid;
     import mx.controls.listClasses.BaseListData;
     import mx.events.ListEvent;
     public class DataGridSelectionIndicator extends CheckBox {
          public function DataGridSelectionIndicator() {
               super();
               addEventListener(Event.CHANGE, onChange)
               setStyle("paddingLeft", 3)
          private function onChange(event:Event):void {
               var grid:DataGrid = DataGrid(listData.owner)
               var myIndex:int = grid.itemRendererToIndex(this)
               if (selected) {
                    if (grid.selectedIndices.indexOf(myIndex)>=0) return;
                    var tmp:Array = grid.selectedIndices
                    tmp.push(grid.itemRendererToIndex(this))
                    grid.selectedIndices = tmp
               else grid.selectedIndices = grid.selectedIndices.filter(function (...args):Boolean {
                    if (args[0] == myIndex) return false;
                    return true
          private function onItemClick(event:ListEvent):void {
               var grid:DataGrid = DataGrid(listData.owner)
               var myIndex:int = grid.itemRendererToIndex(this)
               selected = grid.selectedIndices.indexOf(myIndex)>=0
          override public function set listData(value:BaseListData):void {
               super.listData = value
               var grid:DataGrid = DataGrid(value.owner)
               grid.addEventListener(ListEvent.ITEM_CLICK, onItemClick)
               //grid.addEventListener(ListEvent.CHANGE, onItemClick)
               selected = false
          override public function set data(value:Object):void {
               // prevent default behavior
In attachments swf of:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
     xmlns:controls="ua.org.enginer.controls.*">
     <controls:CheckSelectionDataGrid allowMultipleSelection="true">
          <controls:dataProvider>
               <mx:Array>
                    <mx:Object label="1"/>
                    <mx:Object label="2"/>
                    <mx:Object label="3"/>
                    <mx:Object label="4"/>
                    <mx:Object label="5"/>
               </mx:Array>
          </controls:dataProvider>
     </controls:CheckSelectionDataGrid>
</mx:Application>
So if click on the last checkBox you will see unexpected behavior...

Then click on the last checkBox all checkBoxes become uncheched

How to put an image in a data grid in Flex Builder 2

Hi All,
I need to populate a data grid with some text data received
from a web service and, in a particular column of the datagrid, I
have to put an image depending of a specific data returned me by
the web service.
It seems that there is the possibility to add an image in
data grid column with the cellRenderer properties, but this
property is available only for ActionScript 3.
I'm developing an application in Flex Builder 2 that run
ActionScript 2 and cellRenderer properties is not available. Is it
right?
If no, I will can use this cellRenderer properties in my
application. Please, can you show me an example?
If yes, there is a way to insert an image in datagridcolumn
with ActionScript 2?
Thank you very much
Regards

Flex Builder 2 uses Actionscript 3.
You will need to write a renderer for for this column.
There are a lot of examples of datagrids with images in them.
here is one from the livedocs
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=cellrenderer_072_28.html

ItemRenderer DataGridColumn with AS

Similar Messages

Maybe you are looking for