1 Reply Latest reply on Jun 18, 2012 3:24 AM by ahmed.malik

    Array as Grouped Columns in Advanced Datagrid?

    ahmed.malik

      Greetings,

       

      I have the following collection which I want to display in advanced datagrid as hierarchical and grouped data. Year is an array inside each row which should be grouped together with it's Label as HeaderText and columns under each group should be Requested and Completed.

       

      [Bindable]
      private var summary:ArrayCollection = new ArrayCollection([  
           {Value:"Survey ABCD", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}], categories: [
                {Value:"D-X13", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}],  categories:[
                  {Value:"T-5432", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}], categories:[
                       {Value:"101", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}] },
                       {Value:"102", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}] },
                       {Value:"103", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}] },
                       {Value:"104", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}] }
                    ]} 
                ]}
           ]},
        
           {Value:"Survey Matrix", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}], categories: [
                {Value:"D-X312", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}], categories:[
                     {Value:"T-1235", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}], categories:[
                       {Value:"201",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]},
                       {Value:"202",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]},
                       {Value:"203",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]},
                       {Value:"204",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]}
                    ]},
                
               {Value:"T-7652", Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}], categories:[
                 {Value:"211",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]},
                 {Value:"212",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]},
                 {Value:"213",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]},
                 {Value:"214",Year:[{Label:2013, Requested:10, Completed:7}, {Label:2012, Requested:10, Completed:7}, {Label:2011, Requested:10, Completed:7}]}
              ]} 
             ]}
           ]} 
        
      ]);
      
      
      

       

      Following is my code that I tried and it doesn't work, please help me fix it. Thanks in advance.

       

       

      <mx:AdvancedDataGrid id="surveyGrid"
           sortExpertMode="true"
           width="100%" height="100%">
        
                                 <mx:dataProvider> 
                                              <mx:HierarchicalData source="{summary}" childrenField="categories"/>
                                    </mx:dataProvider>
        
                                    <mx:groupedColumns>
                                              <mx:AdvancedDataGridColumn headerText="Surveys per Value" dataField="Value"/>
                                                     
                                                        <!-- this isn't as I want it -->
                                              <!--<mx:AdvancedDataGridColumnGroup headerText="2013" dataField="Year[0]">
                                                        <mx:AdvancedDataGridColumn headerText="Requested" dataField="Requested"/>
                                                        <mx:AdvancedDataGridColumn headerText="Completed" dataField="Completed"/>
                                              </mx:AdvancedDataGridColumnGroup>
        
                                              <mx:AdvancedDataGridColumnGroup headerText="2012" dataField="Year[1]">
                                                        <mx:AdvancedDataGridColumn headerText="Requested" dataField="Requested"/>
                                                        <mx:AdvancedDataGridColumn headerText="Completed" dataField="Completed"/>
                                              </mx:AdvancedDataGridColumnGroup>
        
                                              <mx:AdvancedDataGridColumnGroup headerText="2011" dataField="Year[2]">
                                                        <mx:AdvancedDataGridColumn headerText="Requested" dataField="Requested"/>
                                                        <mx:AdvancedDataGridColumn headerText="Completed" dataField="Completed"/>
                                              </mx:AdvancedDataGridColumnGroup>-->
        
                                    </mx:groupedColumns> 
        
                          </mx:AdvancedDataGrid>
      
      protected function creationCompleteHandler(event:FlexEvent):void {
        
        
                                              var columns:ArrayCollection = new ArrayCollection(surveyGrid.groupedColumns);
                                              var years:Array = summary.getItemAt(0).Year as Array;
        
                                              for each (var year:Object in years) {
        
                                                        var gridGroup:AdvancedDataGridColumnGroup = new AdvancedDataGridColumnGroup(year.Label);
        
                                                        var requested:AdvancedDataGridColumn = new AdvancedDataGridColumn("Requested");
                                                        var completed:AdvancedDataGridColumn = new AdvancedDataGridColumn("Completed"); 
        
                                                        gridGroup.children = [requested, completed]; 
                                                        columns.addItem(gridGroup); 
        
                                              }
        
                                              surveyGrid.groupedColumns = columns.toArray(); 
                                    }
      
      
      

       

      Best regards,

      Ahmed.

        • 1. Re: Array as Grouped Columns in Advanced Datagrid?
          ahmed.malik Level 1

          I am able to solve it in a little weird way.

           

          On Creation Complete of my application, I call the following method. Where requested.dataTipField = columnIndex.toString(); stores the year index.

          protected function creationCompleteHandler(event:FlexEvent):void {

           

           

                                                  var columns:ArrayCollection = new ArrayCollection(surveyGrid.groupedColumns);

                                                  var years:Array = summary.getItemAt(0).Year as Array;

           

                                                  for (var columnIndex:int = 0; columnIndex < years.length; columnIndex++) {

           

                                                            var year:Object = years[columnIndex];

           

                                                            var gridGroup:AdvancedDataGridColumnGroup = new AdvancedDataGridColumnGroup(year.Label);

           

                                                            var requested:AdvancedDataGridColumn = new AdvancedDataGridColumn("Requested");

                                                            requested.dataTipField = columnIndex.toString();

                                                            requested.itemRenderer = new ClassFactory(YearGridRenderer);

           

                                                            var completed:AdvancedDataGridColumn = new AdvancedDataGridColumn("Completed");

                                                            completed.dataTipField = columnIndex.toString();

                                                            completed.itemRenderer = new ClassFactory(YearGridRenderer);

           

                                                            gridGroup.children = [requested, completed];

                                                            columns.addItem(gridGroup);

           

                                                  }

           

                                                  surveyGrid.groupedColumns = columns.toArray();

                                        }

           

           

          Then associated ItemRenderer does the trick.

           

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

          <s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"

                                                                                            xmlns:s="library://ns.adobe.com/flex/spark"

                                                                                            xmlns:mx="library://ns.adobe.com/flex/mx"

                                                                                            focusEnabled="true" width="100%"

                                                                                            clipAndEnableScrolling="true">

           

                    <fx:Script>

                              <![CDATA[

                                        import mx.controls.AdvancedDataGrid;

                                        import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;

                                        import mx.controls.advancedDataGridClasses.AdvancedDataGridColumnGroup;

                                        import mx.events.FlexEvent;

           

                                        [Bindable]

                                        private var $data:String;

           

                                        override public function set data(value:Object):void {

           

                                                  super.data = value;

                                                  if (data) {

           

                                                            var grid:AdvancedDataGrid = advancedDataGridListData.owner as AdvancedDataGrid;

                                                            var column:AdvancedDataGridColumn = grid.columns[advancedDataGridListData.columnIndex];

           

                                                            var selectedYear:Object = data.Year[column.dataTipField];

           

                                                            $data = selectedYear[column.headerText];

                                                            dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));

                                                  }

                                        }

                              ]]>

                    </fx:Script>

           

                    <s:layout>

                              <s:HorizontalLayout paddingLeft="5" paddingRight="5" verticalAlign="middle" />

                    </s:layout>

           

                    <s:Label text="{$data}" />

           

          </s:MXAdvancedDataGridItemRenderer>


           

          Best regards,

          Ahmed.