13 Replies Latest reply on Aug 13, 2008 11:09 AM by Newsgroup_User

    AdvancedDataGrid: binding an ArrayCollection of Objects

    Vesta0424
      All, I am a Flex newborn, so if this is a really dumb question with an obvious answer, please don't hesitate to respond. Everytime I think I wrap my head around something in this darned language, something else throws me totally .

      I have created a ArrayCollection, empsColl, that holds a number of Employee Objects. I can bind this to a DataGrid no problem. However, the data does not display in the AdvancedDataGrid. I have tried a DataProvider of HierarchicalData with a source of empsColl, but am very confused as to what the childrenField would be in this instance. The Object name sure doesn't work. I have also tried GroupingCollection with the same source, but, alas, no luck.

      Does someone have a code example where this has been done successfully? I see plenty of examples using XML or flat data, but none with an ArrayCollection of Objects.

      Thanks so much.

      Georgia
        • 1. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
          Jed Schneider Level 1
          <mx:dataGrid dataProvider="{empsColl}" >
          <!--define your columns here if you want to customize -->
          </dataGrid>

          I am learning too, but I think this will work for you to get the data to show up.
          • 2. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
            Level 7

            "Vesta0424" <webforumsuser@macromedia.com> wrote in message
            news:g7hd5f$e3r$1@forums.macromedia.com...
            > All, I am a Flex newborn, so if this is a really dumb question with an
            > obvious
            > answer, please don't hesitate to respond. Everytime I think I wrap my
            > head
            > around something in this darned language, something else throws me totally
            > .
            >
            > I have created a ArrayCollection, empsColl, that holds a number of
            > Employee
            > Objects. I can bind this to a DataGrid no problem. However, the
            > data
            > does not display in the AdvancedDataGrid. I have tried a DataProvider of
            > HierarchicalData with a source of empsColl, but am very confused as to
            > what the
            > childrenField would be in this instance. The Object name sure doesn't
            > work.
            > I have also tried GroupingCollection with the same source, but, alas, no
            > luck.
            >
            > Does someone have a code example where this has been done successfully?
            > I
            > see plenty of examples using XML or flat data, but none with an
            > ArrayCollection
            > of Objects.

            It doesn't sound like you really need ADG for what you have, since your data
            doesn't seem to be hierarchical. Could you clarify what you're trying to
            accomplish by using ADG?


            • 3. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
              Vesta0424 Level 1
              Thanks -- this does display the data, however, I need to know how to group it. In the examples I have seen, either HierarchicalData or GroupingCollection is used within DataProvider tags and the source property is where the binding takes place, i.e., source="{empsColl}". In both of the following examples, nothing at all displays in the grid.

              <mx:AdvancedDataGrid id="empADG" initialize="gc.refresh()">
              <mx:dataProvider>
              <mx:GroupingCollection id="gc" source="{empsColl}">
              <mx:Grouping>
              <mx:GroupingField name="name"/>
              </mx:Grouping>
              </mx:GroupingCollection>
              </mx:dataProvider>
              <mx:columns>
              <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
              <mx:AdvancedDataGridColumn dataField="dept" headerText="Department"/>
              <mx:AdvancedDataGridColumn dataField="phone" headerText="Phone"/>
              <mx:AdvancedDataGridColumn dataField="email" headerText="Email"/>
              </mx:columns>
              </mx:AdvancedDataGrid>


              <mx:AdvancedDataGrid id="leaveADG">
              <mx:dataProvider>
              <mx:HierarchicalData id="leaveHD" source="{leaveColl}" childrenField="Employee"/>
              </mx:dataProvider>
              <mx:columns>
              <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
              <mx:AdvancedDataGridColumn dataField="dept" headerText="Department"/>
              <mx:AdvancedDataGridColumn dataField="phone" headerText="Phone"/>
              <mx:AdvancedDataGridColumn dataField="email" headerText="Email"/>
              </mx:columns>
              </mx:AdvancedDataGrid>



              • 4. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                Vesta0424 Level 1
                Hi. Each employee in my empColl can have more than one row. Because there will be a number of employees, I want to group each employee by name. When the name is selected, all the rows associated with that employee should display. Am I missing something? Is there some other way I should be thinking about this?
                • 5. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                  Level 7

                  "Vesta0424" <webforumsuser@macromedia.com> wrote in message
                  news:g7hkk7$lqk$1@forums.macromedia.com...
                  > Hi. Each employee in my empColl can have more than one row. Because
                  > there
                  > will be a number of employees, I want to group each employee by name.
                  > When
                  > the name is selected, all the rows associated with that employee should
                  > display. Am I missing something? Is there some other way I should be
                  > thinking
                  > about this?

                  Could you share a bit more about what is in the ArrayCollection? Especially
                  the structure of your VO's.

                  Thanks;

                  Amy


                  • 6. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                    Vesta0424 Level 1
                    Yes, I would be happy to give you more information. Thanks!

                    Actually, I only used the employee example because I thought it would be easier to understand. What I am really doing is creating a leave request system, for use by employees to make requests for vacation, sick leave, etc. So, an employee may actually have many requests in the system that require approval.

                    My VO is called LeaveRequest and these are the properties.

                    public var leaveRequestID:Number;
                    public var leaveRequestDetailID:Number;
                    public var personID:Number;
                    public var hours:Number;
                    public var name:String;
                    public var leaveType:String;
                    public var startTime:String;
                    public var endTime:String;
                    public var dateFrom:Date;
                    public var dateTo:Date;

                    This is a facsimile of the xml that I am getting via httpService:

                    <requests>
                    <request>
                    <leaveRequestID>1</leaveRequestID>
                    <leaveRequestDetailID>1</leaveRequestDetailID>
                    <personid>1</personid>
                    <name>Kostner, Kevin</name>
                    <dateFrom>01/05/2009</dateFrom>
                    <dateTo>01/09/2009</dateTo>
                    <leaveType>Annual</leaveType>
                    <startTime></startTime>
                    <endTime></endTime>
                    <hours>37.5</hours>
                    </request>
                    <request>
                    <leaveRequestID>1</leaveRequestID>
                    <leaveRequestDetailID>2</leaveRequestDetailID>
                    <personid>1</personid>
                    <name>Kostner, Kevin</name>
                    <dateFrom>01/10/2009</dateFrom>
                    <dateTo>01/11/2009</dateTo>
                    <leaveType>Annual</leaveType>
                    <startTime>8:15 AM</startTime>
                    <endTime>4:45 PM</endTime>
                    <hours>7.5</hours>
                    </request>
                    <request>
                    <leaveRequestID>2</leaveRequestID>
                    <leaveRequestDetailID>3</leaveRequestDetailID>
                    <personid>1</personid>
                    <name>Kostner, Kevin</name>
                    <dateFrom>01/07/2009</dateFrom>
                    <dateTo>01/08/2009</dateTo>
                    <leaveType>Sick</leaveType>
                    <startTime>8:15 AM</startTime>
                    <endTime>4:45 PM</endTime>
                    <hours>7.5</hours>
                    </request>
                    </requests>

                    This is the code where I build my ArrayCollection, leaveColl, (which is straight out of the Adobe Training from the Source Flex book). I want to display employee as a folder that holds all distinct requests. I am thinking there is something very simple that I don't understand.

                    <mx:Script>
                    <![CDATA[
                    import mx.rpc.events.ResultEvent;
                    import mx.collections.ArrayCollection;
                    import mx.utils.ArrayUtil;
                    import mx.collections.HierarchicalData;

                    import vo.LeaveRequest;

                    [Bindable]
                    private var xmlList:XMLList;

                    [Bindable]
                    private var leaveColl:ArrayCollection;

                    private function init() : void
                    {
                    leaveService.send();
                    }

                    private function resultHandler(event:ResultEvent):void
                    {

                    //trace(event.result);
                    xmlList = result..requests as XMLList;
                    var arrLeave:Array = new Array();
                    for(x=0;x<xmlList.length();x++) {

                    var newDateFrom:Date = new Date (xmlList[x].dateFrom.toString());
                    var newDateTo:Date = new Date (xmlList[x].dateTo.toString());

                    var lr:LeaveRequest= new LeaveRequest
                    (

                    Number(xmlList[x].leaveRequestID),
                    Number(xmlList[x].leaveRequesDetailID),
                    Number(xmlList[x].personid),
                    Number(xmlList[x].hours),
                    String(xmlList[x].name),
                    String(xmlList[x].leaveType),
                    String(xmlList[x].startTime),
                    String(xmlList[x].endTime),
                    (newDateFrom),
                    (newDateTo)
                    );

                    arrLeave.push(lr);
                    }

                    leaveColl = new ArrayCollection(arrLeave);
                    }


                    • 7. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                      Level 7

                      "Vesta0424" <webforumsuser@macromedia.com> wrote in message
                      news:g7i03q$4gg$1@forums.macromedia.com...
                      > Yes, I would be happy to give you more information. Thanks!
                      >
                      > Actually, I only used the employee example because I thought it would be
                      > easier to understand. What I am really doing is creating a leave request
                      > system, for use by employees to make requests for vacation, sick leave,
                      > etc.
                      > So, an employee may actually have many requests in the system that require
                      > approval.
                      >
                      > My VO is called LeaveRequest and these are the properties.
                      >
                      > public var leaveRequestID:Number;
                      > public var leaveRequestDetailID:Number;
                      > public var personID:Number;
                      > public var hours:Number;
                      > public var name:String;
                      > public var leaveType:String;
                      > public var startTime:String;
                      > public var endTime:String;
                      > public var dateFrom:Date;
                      > public var dateTo:Date;
                      >
                      > This is a facsimile of the xml that I am getting via httpService:
                      >
                      > <requests>
                      > <request>
                      > <leaveRequestID>1</leaveRequestID>
                      > <leaveRequestDetailID>1</leaveRequestDetailID>
                      > <personid>1</personid>
                      > <name>Kostner, Kevin</name>
                      > <dateFrom>01/05/2009</dateFrom>
                      > <dateTo>01/09/2009</dateTo>
                      > <leaveType>Annual</leaveType>
                      > <startTime></startTime>
                      > <endTime></endTime>
                      > <hours>37.5</hours>
                      > </request>
                      > <request>
                      > <leaveRequestID>1</leaveRequestID>
                      > <leaveRequestDetailID>2</leaveRequestDetailID>
                      > <personid>1</personid>
                      > <name>Kostner, Kevin</name>
                      > <dateFrom>01/10/2009</dateFrom>
                      > <dateTo>01/11/2009</dateTo>
                      > <leaveType>Annual</leaveType>
                      > <startTime>8:15 AM</startTime>
                      > <endTime>4:45 PM</endTime>
                      > <hours>7.5</hours>
                      > </request>
                      > <request>
                      > <leaveRequestID>2</leaveRequestID>
                      > <leaveRequestDetailID>3</leaveRequestDetailID>
                      > <personid>1</personid>
                      > <name>Kostner, Kevin</name>
                      > <dateFrom>01/07/2009</dateFrom>
                      > <dateTo>01/08/2009</dateTo>
                      > <leaveType>Sick</leaveType>
                      > <startTime>8:15 AM</startTime>
                      > <endTime>4:45 PM</endTime>
                      > <hours>7.5</hours>
                      > </request>
                      > </requests>
                      >
                      > This is the code where I build my ArrayCollection, leaveColl, (which is
                      > straight out of the Adobe Training from the Source Flex book). I want to
                      > display employee as a folder that holds all distinct requests. I am
                      > thinking
                      > there is something very simple that I don't understand.
                      >
                      > <mx:Script>
                      > <![CDATA[
                      > import mx.rpc.events.ResultEvent;
                      > import mx.collections.ArrayCollection;
                      > import mx.utils.ArrayUtil;
                      > import mx.collections.HierarchicalData;
                      >
                      > import vo.LeaveRequest;
                      >
                      > [Bindable]
                      > private var xmlList:XMLList;
                      >
                      > [Bindable]
                      > private var leaveColl:ArrayCollection;
                      >
                      > private function init() : void
                      > {
                      > leaveService.send();
                      > }
                      >
                      > private function resultHandler(event:ResultEvent):void
                      > {
                      >
                      > //trace(event.result);
                      > xmlList = result..requests as XMLList;
                      > var arrLeave:Array = new Array();
                      > for(x=0;x<xmlList.length();x++) {
                      >
                      > var newDateFrom:Date = new Date (xmlList[x].dateFrom.toString());
                      > var newDateTo:Date = new Date (xmlList[x].dateTo.toString());
                      >
                      > var lr:LeaveRequest= new LeaveRequest
                      > (
                      >
                      > Number(xmlList[x].leaveRequestID),
                      > Number(xmlList[x].leaveRequesDetailID),
                      > Number(xmlList[x].personid),
                      > Number(xmlList[x].hours),
                      > String(xmlList[x].name),
                      > String(xmlList[x].leaveType),
                      > String(xmlList[x].startTime),
                      > String(xmlList[x].endTime),
                      > (newDateFrom),
                      > (newDateTo)
                      > );
                      >
                      > arrLeave.push(lr);
                      > }
                      >
                      > leaveColl = new ArrayCollection(arrLeave);
                      > }

                      Could you post what your actual GroupingCollection/ADG code looks like?

                      Thanks;

                      Amy


                      • 8. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                        Vesta0424 Level 1
                        Yes, thanks, here is my ADG code. I've tried it both ways: Hierarchical Data (but as I said, don't know what the childrenField would be and, besides, I think this data is flat really) and Groupingcollection.

                        GroupingCollection: I tried a number of fields to use as the Grouping fields, this is my latest iteration.

                        <mx:AdvancedDataGrid id="lvADG" initialize="lgc.refresh()">
                        <mx:dataProvider>
                        <mx:GroupingCollection id="lgc" source="{leaveColl}">
                        <mx:grouping>
                        <mx:Grouping>
                        <mx:GroupingField name="name"/>
                        <mx:GroupingField name="leaveRequestDetailID"/>
                        </mx:Grouping>
                        </mx:grouping>
                        </mx:GroupingCollection>
                        </mx:dataProvider>
                        <mx:columns>
                        <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
                        <mx:AdvancedDataGridColumn dataField="leaveType" headerText="Type"/>
                        <mx:AdvancedDataGridColumn dataField="dateFrom" headerText="From Date"/>
                        <mx:AdvancedDataGridColumn dataField="dateTo" headerText="To Date"/>
                        <mx:AdvancedDataGridColumn dataField="startTime" headerText="Start Time"/>
                        <mx:AdvancedDataGridColumn dataField="endTime" headerText="EndTime"/>
                        <mx:AdvancedDataGridColumn dataField="hours" headerText="Hours"/>
                        </mx:columns>
                        </mx:AdvancedDataGrid>

                        HierarchicalData : an ArrayCollection of rows seems more flat than hierarchical. I have tried binding directly to the XMLListData, using request as the childrenfield and this did not work either.

                        <mx:AdvancedDataGrid id="leaveADG" initialize="gc.refresh()">
                        <mx:dataProvider>
                        <mx:HierarchicalData id="leaveHD" source="{leaveColl}" childrenField="request"/>
                        </mx:dataProvider>
                        <mx:columns>
                        <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
                        <mx:AdvancedDataGridColumn dataField="leaveType" headerText="Type"/>
                        <mx:AdvancedDataGridColumn dataField="dateFrom" headerText="From Date"/>
                        <mx:AdvancedDataGridColumn dataField="dateTo" headerText="To Date"/>
                        <mx:AdvancedDataGridColumn dataField="startTime" headerText="Start Time"/>
                        <mx:AdvancedDataGridColumn dataField="endTime" headerText="EndTime"/>
                        <mx:AdvancedDataGridColumn dataField="hours" headerText="Hours"/>
                        </mx:columns>
                        </mx:AdvancedDataGrid>
                        • 9. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                          Level 7

                          "Vesta0424" <webforumsuser@macromedia.com> wrote in message
                          news:g7pbd1$8g4$1@forums.macromedia.com...
                          > Yes, thanks, here is my ADG code. I've tried it both ways: Hierarchical
                          > Data
                          > (but as I said, don't know what the childrenField would be and, besides, I
                          > think this data is flat really) and Groupingcollection.
                          >
                          > GroupingCollection: I tried a number of fields to use as the Grouping
                          > fields,
                          > this is my latest iteration.
                          >
                          > <mx:AdvancedDataGrid id="lvADG" initialize="lgc.refresh()">
                          > <mx:dataProvider>
                          > <mx:GroupingCollection id="lgc" source="{leaveColl}">
                          > <mx:grouping>
                          > <mx:Grouping>
                          > <mx:GroupingField name="name"/>
                          > <mx:GroupingField name="leaveRequestDetailID"/>
                          > </mx:Grouping>
                          > </mx:grouping>
                          > </mx:GroupingCollection>
                          > </mx:dataProvider>
                          > <mx:columns>
                          > <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
                          > <mx:AdvancedDataGridColumn dataField="leaveType" headerText="Type"/>
                          > <mx:AdvancedDataGridColumn dataField="dateFrom" headerText="From Date"/>
                          > <mx:AdvancedDataGridColumn dataField="dateTo" headerText="To Date"/>
                          > <mx:AdvancedDataGridColumn dataField="startTime" headerText="Start
                          > Time"/>
                          > <mx:AdvancedDataGridColumn dataField="endTime" headerText="EndTime"/>
                          > <mx:AdvancedDataGridColumn dataField="hours" headerText="Hours"/>
                          > </mx:columns>
                          > </mx:AdvancedDataGrid>
                          >
                          > HierarchicalData : an ArrayCollection of rows seems more flat than
                          > hierarchical. I have tried binding directly to the XMLListData, using
                          > request
                          > as the childrenfield and this did not work either.
                          >
                          > <mx:AdvancedDataGrid id="leaveADG" initialize="gc.refresh()">
                          > <mx:dataProvider>
                          > <mx:HierarchicalData id="leaveHD" source="{leaveColl}"
                          > childrenField="request"/>
                          > </mx:dataProvider>
                          > <mx:columns>
                          > <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
                          > <mx:AdvancedDataGridColumn dataField="leaveType" headerText="Type"/>
                          > <mx:AdvancedDataGridColumn dataField="dateFrom" headerText="From Date"/>
                          > <mx:AdvancedDataGridColumn dataField="dateTo" headerText="To Date"/>
                          > <mx:AdvancedDataGridColumn dataField="startTime" headerText="Start
                          > Time"/>
                          > <mx:AdvancedDataGridColumn dataField="endTime" headerText="EndTime"/>
                          > <mx:AdvancedDataGridColumn dataField="hours" headerText="Hours"/>
                          > </mx:columns>
                          > </mx:AdvancedDataGrid>

                          I put together a simpler example file, but I couldn't make it work either.
                          If anyone else wants to pick this up, here's a starting point:

                          <?xml version="1.0" encoding="utf-8"?>

                          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
                          creationComplete="init()">

                          <mx:Script>

                          <![CDATA[

                          private function init():void{

                          trace('foo');

                          }

                          ]]>

                          </mx:Script>

                          <mx:ArrayCollection id="leaveColl">

                          <mx:Object leaveRequestID="1"

                          leaveRequestDetailID="1"

                          personID="1"

                          name="Kostner, Kevin"

                          hours="37.5"

                          leaveType="Annual"

                          startTime=""

                          endTime=""

                          dateFrom="{new Date(2009,0,5)}"

                          dateTo="{new Date(2009,0, 9)}" />

                          <mx:Object leaveRequestID="1"

                          leaveRequestDetailID="2"

                          personID="1"

                          name="Kostner, Kevin"

                          hours="7.5"

                          leaveType="Annual"

                          startTime=""

                          endTime=""

                          dateFrom="{new Date(2009,0,10)}"

                          dateTo="{new Date(2009,0, 11)}" />

                          <mx:Object leaveRequestID="2"

                          leaveRequestDetailID="3"

                          personID="1"

                          name="Kostner, Kevin"

                          hours="7.5"

                          leaveType="Annual"

                          startTime="8:15"

                          endTime="4:45"

                          dateFrom="{new Date(2009,0,7)}"

                          dateTo="{new Date(2009,0, 8)}" />

                          </mx:ArrayCollection>

                          <mx:AdvancedDataGrid id="leave">

                          <mx:dataProvider>

                          <mx:GroupingCollection id="lgc" source="{leaveColl}">

                          <mx:grouping>

                          <mx:Grouping>

                          <mx:GroupingField name="name" />

                          </mx:Grouping>

                          </mx:grouping>

                          </mx:GroupingCollection>

                          </mx:dataProvider>

                          <mx:columns>

                          <mx:AdvancedDataGridColumn dataField="GroupLabel" headerText="Test Header"
                          />

                          <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>

                          <mx:AdvancedDataGridColumn dataField="leaveType" headerText="Type"/>

                          <mx:AdvancedDataGridColumn dataField="dateFrom" headerText="From Date"/>

                          <mx:AdvancedDataGridColumn dataField="dateTo" headerText="To Date"/>

                          <mx:AdvancedDataGridColumn dataField="startTime" headerText="Start Time"/>

                          <mx:AdvancedDataGridColumn dataField="endTime" headerText="EndTime"/>

                          <mx:AdvancedDataGridColumn dataField="hours" headerText="Hours"/>

                          </mx:columns>


                          </mx:AdvancedDataGrid>

                          </mx:Application>



                          I put in the init() function in just as a place to put a break point so I
                          could look at the variables. It didn't do me any good, thoug :-).



                          Sorry...I tried.


                          • 10. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                            Level 7

                            "Vesta0424" <webforumsuser@macromedia.com> wrote in message
                            news:g7pbd1$8g4$1@forums.macromedia.com...
                            > Yes, thanks, here is my ADG code. I've tried it both ways: Hierarchical
                            > Data
                            > (but as I said, don't know what the childrenField would be and, besides, I
                            > think this data is flat really) and Groupingcollection.

                            P.S. Maybe this will help. I haven't had time to look at it, but it clearly
                            works:

                            http://flexpearls.blogspot.com/2008/02/groupingcollection-to-group-mails-on.html


                            • 11. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                              Vesta0424 Level 1
                              Thanks for your valiant attempts to help me. This is my big issue with Flex, and has been all along -- there's only very basic help. Everyone is wowed by the nifty things you can do -- the flash if you will -- with the interface, but when it comes to handling data, either I am an idiot, or there's something fundamentally missing.

                              I know why Flex consultants are so high paid -- maybe its a conspiracy : }
                              • 12. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                                matt_chotin Level 3
                                Amy, all your sample code was missing was refreshing the grouping collection (it needs to be refreshed to make sure that the grouping is done). You also probably want the same header that's doing the grouping (Name) to be first since that's where the group will go.

                                So, in the ADG tag put initialize="lgc.refresh()" and away you go.

                                Matt
                                • 13. Re: AdvancedDataGrid: binding an ArrayCollection of Objects
                                  Level 7

                                  "matt_chotin" <webforumsuser@macromedia.com> wrote in message
                                  news:g7v3ig$nmf$1@forums.macromedia.com...
                                  > Amy, all your sample code was missing was refreshing the grouping
                                  > collection
                                  > (it needs to be refreshed to make sure that the grouping is done). You
                                  > also
                                  > probably want the same header that's doing the grouping (Name) to be first
                                  > since that's where the group will go.

                                  I was just trying stuff to see if I could get it to work. :-)