9 Replies Latest reply on Aug 20, 2009 6:49 AM by _Natasha_

    Advanced Datagrid Grouping

    Fabio Cerioni

      We are having doubts about Advanced Datagrid's grouped columns.

       

      With the following XML as datasource of an Advanced Datagrid Component, we would like to know how to group the data taking into account the tag "Cgrpm". Just to explain, we would like to create a two level header group, the first thing is to group the data by "Cgrpm" and then show all the left entries of the XML. It should look like this:

       

      00005400000058
      00000034...
      EntranceLeaveCalday...
      2009-08-112009-10-012009-10-01...

       

      I hope anyone could help us.

       

      Thanks in advance for your help.

      <Details>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-01</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-01</Calday>
                     <Real>0.0</Real>
                     <Total>0.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-02</Leave>
                     <Cgrpm>00000058</Cgrpm>
                     <Calday>2009-10-02</Calday>
                     <Real>1.0</Real>
                     <Total>0.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-02</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-02</Calday>
                     <Real>0.0</Real>
                     <Total>16.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-03</Leave>
                     <Cgrpm>00000034</Cgrpm>
                     <Calday>2009-10-03</Calday>
                     <Real>0.0</Real>
                     <Total>17.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-04</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-04</Calday>
                     <Real>0.0</Real>
                     <Total>21.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-05</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-05</Calday>
                     <Real>0.0</Real>
                     <Total>0.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-06</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-06</Calday>
                     <Real>0.0</Real>
                     <Total>0.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-07</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-07</Calday>
                     <Real>0.0</Real>
                     <Total>0.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-08</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-08</Calday>
                     <Real>0.0</Real>
                     <Total>0.0</Total>
                     <Period/>
                  </item>
                  <item>
                     <Hotel>ELC</Hotel>
                     <Entrance>2009-08-11</Entrance>
                     <Leave>2009-10-09</Leave>
                     <Cgrpm>00000054</Cgrpm>
                     <Calday>2009-10-09</Calday>
                     <Real>0.0</Real>
                     <Total>16.0</Total>
                     <Period/>
                  </item>
      </Details>
        • 1. Re: Advanced Datagrid Grouping
          _Natasha_ Level 4

          Hi,

          it's seems that it's very difficult to create a table like you've created. There is no system in contents of cells.

           

          It's very easy to create a table where all parameters Hotel, Entrance, Leave are in colunms and group item by Cgrpm in rows.

          • 2. Re: Advanced Datagrid Grouping
            Fabio Cerioni Level 1

            Hi Natasha,

             

            so you think it is not possible to group the data as i would like?

             

            What other kind of grouping would you suggest?

             

            Thanks in advance for your help.

            • 3. Re: Advanced Datagrid Grouping
              _Natasha_ Level 4

              It's possible, but not automaticaly. You should create dataProvider and colunms dynamically by parsing your data without using any existing functionality.

               

              You can create a combox to filter visible data or buttons to show parts of data.

              It depence on the usage.

              • 4. Re: Advanced Datagrid Grouping
                Fabio Cerioni Level 1

                Hi Natasha,

                 

                i have created a dynamic Advanced Datagrid but still not able to get the result as i would like, at the moment, it looks like that:

                result.jpg

                 

                As you can see, the data is not grouped well.

                 

                I send the generated code, maybe you could help me to solve the problem.

                 

                Thanks in advance for your help.

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
                     <mx:Script>
                         <![CDATA[
                             import mx.controls.AdvancedDataGrid;
                             import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
                             import mx.controls.advancedDataGridClasses.AdvancedDataGridColumnGroup;
                
                
                            import mx.collections.XMLListCollection;
                
                
                            private function init():void
                             {
                                 createADG();
                             }
                             private function createADG():void
                             {
                                 var localXML:XMLListCollection = new XMLListCollection(myXML.children());
                                 var itemXML:Object;
                                 var search:String;
                                 var arrayCabecera:Array = new Array();
                                 var arrayCampos:Array = new Array();
                
                
                                for each (itemXML in localXML)
                                 {
                                     for(var x:int=0;x<itemXML.children().length();x++)
                                     {
                                         if(itemXML.*[x].localName() == "Cgrpm")
                                         {
                                             arrayCabecera.push(itemXML.*[x].toString());
                                             arrayCampos.push(itemXML.*[x].localName());
                                         }
                                         else
                                         {
                                             arrayCampos.push(itemXML.*[x].localName());
                                         }
                                     }
                                 }
                                
                                 // Remove duplicates
                                 arrayCabecera = removeDuplicates(arrayCabecera);
                                 arrayCampos = removeDuplicates(arrayCampos);
                                 //trace(arrayCabecera.length);
                                 //trace(arrayCampos.length);
                                
                                 //Create Advanced Datagrid
                                 var cg:AdvancedDataGridColumnGroup;
                                 var adgc:AdvancedDataGridColumn;
                                 var cga:Array = new Array(); //Column group Array
                
                
                                for each (itemXML in arrayCabecera)
                                 {
                                     trace(itemXML);
                                     cg = new AdvancedDataGridColumnGroup();
                                     cg.headerText = itemXML.toString();
                                     cga.push(cg);
                                 }
                                
                                 for each (itemXML in arrayCampos)
                                 {
                                     trace(itemXML);
                                     adgc = new AdvancedDataGridColumn();
                                     adgc.editable = true;
                                     adgc.sortable = true;
                                     adgc.visible = true;
                                     adgc.headerText = itemXML.toString();
                                     adgc.dataField = itemXML.toString();
                                     //Asignar a cada columna
                                     cg.children.push(adgc);                   
                                 }
                                
                                 var adg1:AdvancedDataGrid = new AdvancedDataGrid();
                                 // Set the groupedColumns Array
                                 adg1.groupedColumns = cga;
                                 // Set the dataProvider
                                 adg1.dataProvider = localXML;
                                 this.addChild(adg1);
                             }
                            
                             private function removeDuplicates(localArray:Array):Array
                             {
                                 var currentValue:String = "";
                                 var tempArray:Array = new Array();
                                 localArray.sort(Array.CASEINSENSITIVE);
                                 localArray.forEach
                                 (function(item:*,index:uint,array:Array):void
                                     {
                                         if (currentValue != item)
                                         {
                                             tempArray.push(item);
                                             currentValue = item;
                                         }
                                     }
                                 );
                                 return tempArray;
                             }
                         ]]>
                     </mx:Script>
                     <mx:XML id="myXML" xmlns="">
                          <Detalles>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-01</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-01</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>0.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-02</Fechab>
                                <Cgrpm>00000058</Cgrpm>
                                <Calday>2009-10-02</Calday>
                                <Real>1.0</Real>
                                <Presupuestado>0.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-02</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-02</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>16.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-03</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-03</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>17.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-04</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-04</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>21.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-05</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-05</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>0.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-06</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-06</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>0.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-07</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-07</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>0.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-08</Fechab>
                                <Cgrpm>00000054</Cgrpm>
                                <Calday>2009-10-08</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>0.0</Presupuestado>
                                <Periodo/>
                             </item>
                             <item>
                                <Fechaa>2009-08-11</Fechaa>
                                <Fechab>2009-10-09</Fechab>
                                <Cgrpm>00000034</Cgrpm>
                                <Calday>2009-10-09</Calday>
                                <Real>0.0</Real>
                                <Presupuestado>16.0</Presupuestado>
                                <Periodo/>
                             </item>
                          </Detalles>
                     </mx:XML>
                </mx:Application>
                
                • 5. Re: Advanced Datagrid Grouping
                  _Natasha_ Level 4

                  Error is in function

                  private function removeDuplicates(localArray:Array):Array

                   

                  at this string:

                  localArray.sort(Array.CASEINSENSITIVE);

                   

                  For Array method sort return sorted array, it doesn't sort source one.

                  So it should be

                  localArray = localArray.sort(Array.CASEINSENSITIVE);

                  • 6. Re: Advanced Datagrid Grouping
                    Fabio Cerioni Level 1

                    Hi Natasha,

                     

                    the function works fine, i only need it to get the first header group and, the second time, to get the name fields for dataFields.

                     

                    The problem is that the dataFields only appear only in the third group and not in the first and second as you can see in the image i attached before.

                     

                    Any other way to group the data the way shown in the attached image?


                    Thanks in advance for any help.

                    • 7. Re: Advanced Datagrid Grouping
                      _Natasha_ Level 4

                                               for each (itemXML in arrayCabecera)
                                       {
                                           trace(itemXML);
                                           cg = new AdvancedDataGridColumnGroup();
                                           cg.headerText = itemXML.toString();
                                           cga.push(cg);
                                       }
                                      
                                       for each (itemXML in arrayCampos)
                                       {
                                           trace(itemXML);
                                           adgc = new AdvancedDataGridColumn();
                                           adgc.editable = true;
                                           adgc.sortable = true;
                                           adgc.visible = true;
                                           adgc.headerText = itemXML.toString();
                                           adgc.dataField = itemXML.toString();
                                           //Asignar a cada columna
                                           cg.children.push(adgc);                   
                                       }
                      }

                      This way you get all columns in all groups.

                      • 8. Re: Advanced Datagrid Grouping
                        Fabio Cerioni Level 1

                        Hi Natasha,

                         

                        thanks a lot for your quick anserws,  i have fixed that every column can show every dataField para the grouping still does not work as you can see on the following image:

                         

                        result.jpg

                        If you have a look in detail, you can see that every entry is shown on every group but it shouldn't be like that, every value from "Cgrpm" should correspond to the grouped column. So the main question is, can the Advanced datagrip group complex XML data together? Or, am i doing something wrong?

                         

                        Thanks in advance for any help.

                        • 9. Re: Advanced Datagrid Grouping
                          _Natasha_ Level 4

                          ADG is not designed to use for horizontal grouping, only for vertical grouping.

                           

                          For showing as you want you should create another XML to use as a dataProvider for Grid.

                          You should create a structure like this:

                          <item 00000054_Calday="" ... 00000058_Calday="" ... 00000060_Calday="" .../>

                          <item 00000054_Calday="" ... 00000060_Calday="" .../>

                          <item 00000054_Calday="" ... />

                          <item 00000054_Calday="" ... />

                           

                          And each colunm should show personal data column.

                          1 person found this helpful