Xml – Assigning an array of objects to a DataGrid

apache-flexmxml

When the dataProvider for an DataGrid is an array of objects, how do I set each column's dataField to a property of the object.

I have an ArrayCollection (say a) where each item is an object
For example a[i] = data:Object
Where the object data has some subproperties – data.name, data.title, data.content etc.

I have a DataGrid in which I want to display this data.

So I put:

<mx:DataGrid id="entries" dataProvider="{resultRSS}">
  <mx:columns>
<mx:Array>
  <mx:DataGridColumn headerText="Title" dataField="data.title"/>
  <mx:DataGridColumn headerText="Date" dataField="data.created"/>
</mx:Array> 
  </mx:columns>
</mx:DataGrid>

This doesn't seem to work at all. I get an empty DataGrid. How should I assign the dataField property, so that it shows up properly? I've tried {data.title} too.

Thanks.

Edit: sample of my data

-[]arraycollection
--[0]
----id="id1"
----data.
------title="something"
------name="something"
------text="some html"
--[1]
----id="id2"
----data.
------title="something2"
------name="something2"
------text="some html2"

and table should be

 |title     |name      |text     |
 =================================
 |something |something |some html|
 |something2|something2|somehtml2|

Best Answer

here is your answer

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initialize()">

<mx:Script>
    <![CDATA[
        import mx.collections.HierarchicalData;

        var a:Array = new Array();
        var o:Object = {};
        private function initialize():void{
          o["text"]="hello";
                  o["desc"]="Rahul";
          a.push(o);
        }

    ]]>
</mx:Script>


    <mx:AdvancedDataGrid width="100%" height="100%" sortExpertMode="true" id="adg1" designViewDataType="tree" dataProvider="{new HierarchicalData(a)}">
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="text" dataField="text"/>
            <mx:AdvancedDataGridColumn headerText="desc" dataField="desc"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

</mx:Application>

edit - ok now discard my previous answer according to your data try this

var a:Array = new Array();
        var o:Object = {};      
        private function stringArrayToObjectArray():void{
            o["id"]="mauj";
            var oj:Object=new Object();
            oj["title"]="aaa";
            o["data"]=oj;

            var oj1:Object=new Object();
            oj1["id"]="mauj2";
            var oj2:Object=new Object();
            oj2["title"]="qqqq";
            oj1["data"]=oj2;


            a.push(o);      
            a.push(oj1);        
        }

         private function some_labelFunc(item:Object,th:Object):String {
                return item.data.title;
            }

    ]]>
</mx:Script>



    <mx:AdvancedDataGrid  width="100%" height="100%" sortExpertMode="true" id="adg1" dataProvider="{a}">
        <mx:columns>
            <mx:AdvancedDataGridColumn headerText="COMPANIES" dataField="data" labelFunction="some_labelFunc"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

</mx:Application>

try this sorry for such a bad code

Related Solutions

ArrayCollection Objects to String – Problems with “for each” loop

An easier way to do all this (admittedly not with the labels you specified) is to just use ActionScript's built in ObjectUtil.toString method.

You would write something like this:

import mx.utils.ObjectUtil;

public function dumpObj():void {
    myTextField.text = ObjectUtil.toString(obj);
 }

This should pretty much print out every property of every multiple / nested object you have.

HOWEVER - you should make a fundamental change to your component if you want it to be reusable. You need a getter/setter for your collection. In the component, add this code:

[Bindable]
private var _myCollection:ArrayCollection;

public function set myCollection (data:ArrayCollection) : void {
    _myCollection = data;
}

public function get myCollection () : ArrayCollection {
    return _myCollection;
}

There are several other ways to do this - look it up if you need something different. In your datagrid, use the private ArrayCollection variable like this:

<mx:DataGrid id="compras" x="0" y="0" width="556" dataProvider="{_myCollection}" editable="false">
    <mx:columns>
            <mx:DataGridColumn headerText="ID" dataField="tinteiroid" visible="false"/>
...

In the main application, you can populate your component like this:

<kgtm:myComponent x="0" y="20" myCollection="{queryDataAC}"

And you name your ArrayCollection like this:

<mx:ArrayCollection id="queryDataAC">

in your top level Application code, you define the kgtm namespace, so you can use your custom component, like so:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:kgtm="com.kgtm.*"

Then put your component in the folder corresponding to this namespace definition.

This all leads to the final object print utility - which you define on the component, as it is the only thing that should know about how to print out it's data.

Define a public function, and get it to print out the private ArrayCollection data, using ObjectUtil or your own method.

public var getLastQueryOutput () : String {

private var output:String = "";
private var len:int = _myCollection.length;
for (var i:int = 0; i <len; i++)   {
    output = output + 
    "TinteiroID:"+_myCollection[i].tinteiroid+
    "#TinteiroLABEL:"+_myCollection[i].label+
    "#TinteiroREF:"+_myCollection[i].ref+
    "#TinteiroMARCA:"+_myCollection[i].marca+
    "#TinteiroGENERO:"+_myCollection[i].genero+
    "#TinteiroQUANTIDADE:"+_myCollection[i].quantidade+
    "#FIMPROD#";

}
trace(output);

}

Hopefully this will help. If you name the object correctly as you are putting it into the ArrayCollection, you can again just use ObjectUtil as I stated at the top.

Casp - Check out more of my (and my colleagues) blog entries here

Best Answer

Related Solutions

ArrayCollection Objects to String – Problems with “for each” loop

Related Topic