1 Reply Latest reply on Sep 11, 2009 7:52 AM by NewbieToFlex

    AdvancedDataGridRendererProvider spanning Grouping Column




      I am trying to span just the Grouping Column.


      Sample Data:


                          Northern California          Lauren Ipsum

                          Arizona                         Dana Binn



      The above data is displayed in AdvancedDataGrid.  What I want is when I loan, I want to span the row where Southwest is displayed with one Renderer where it shows a Text Southwest and then a ComboBox.


      How can I span all three columns for that perticular row? I looked into AdvancedDataGridRendererProvider, but I can't seem to figure out how to do the Grouping Column.  What ever I try, it spans the leaf notes, but not the Southwest. Does anyone know how to archieve this? Thanks.

        • 1. Re: AdvancedDataGridRendererProvider spanning Grouping Column
          NewbieToFlex Level 1



          I was able to span the Grouping Column, but I am loosing the Children and the renderer is only rendering in the first cell, not all three columns even though the all three columns are spanned.



          This is what I have done in summary to span the Grouping row.


                          var rp : AdvancedDataGridRendererProvider = new AdvancedDataGridRendererProvider();
                          rp.renderer = new ClassFactory(TestRenderer);
          //              rp.dataField = "Region";
                          rp.columnIndex = 0;
                          rp.columnSpan = 2;
                          rp.depth = 1;


          If I uncomment the line above I loose this spanning and it just shows the hierarchical data with the default renderer and it does not even render my renderer. Please help. Thanks.


          Full code:


          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                         import mx.containers.HBox;
                         import mx.controls.advancedDataGridClasses.AdvancedDataGridRendererProvider;
                         import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
                         import mx.collections.GroupingCollection;
                         import mx.collections.GroupingField;
                         import mx.collections.Grouping;
                         import mx.collections.ArrayCollection;
                      private var dpFlat : ArrayCollection = new ArrayCollection([
                        {Region:"Southwest", Territory:"Arizona", 
                            Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                        {Region:"Southwest", Territory:"Arizona", 
                            Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
                        {Region:"Southwest", Territory:"Central California", 
                            Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
                        {Region:"Southwest", Territory:"Nevada", 
                            Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
                        {Region:"Southwest", Territory:"Northern California", 
                            Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                        {Region:"Southwest2", Territory:"Northern California", 
                            Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
                        {Region:"Southwest2", Territory:"Southern California", 
                            Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                        {Region:"Southwest2", Territory:"Southern California", 
                            Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000, Test:"Worked"}
                      public var myGCol1 : GroupingCollection = new GroupingCollection();
                      private var myGrp : Grouping = new Grouping();
                      private function initDG() : void
                           // Initialize the GroupingCollection instance
                              myGCol1.source = dpFlat;
                              // The Grouping instance defines the grouping fields
                              // in the collection, and the order of the groups
                              // in the hierarchy.
                              myGrp.fields = [new GroupingField("Region")];
                              // The grouping property contains a Grouping instance
                              myGCol1.grouping = myGrp; 
                              // Specify the GroupedCollection as the data provider for 
                           // the AdvancedDataGrid control.
                           myADG2.dataProvider = myGCol1;
                           // Refresh the display
                      private function createColumns() : void
                           var cols: Array = myADG2.columns;
                              cols.push( new AdvancedDataGridColumn("Region"));
                           cols.push( new AdvancedDataGridColumn("Territory"));
                           cols.push( new AdvancedDataGridColumn("Territory_Rep"));
                           myADG2.columns = cols;
                           var testTypes : ArrayCollection = new ArrayCollection();
                           testTypes.addItem("test 1");
                           testTypes.addItem("test 2");
                           var rend : TestRenderer = new TestRenderer();
                           rend.types = testTypes;  
                           var rp : AdvancedDataGridRendererProvider = new AdvancedDataGridRendererProvider();
                           rp.renderer = new ClassFactory(TestRenderer);
          //                 rp.dataField = "Region";
                           rp.columnIndex = 0;
                           rp.columnSpan = 2;
                              rp.depth = 1;
                    title="Advanced DataGrid Control Example"
                         creationComplete="initDG()" initialize="createColumns();"  sortExpertMode="true" showHeaders="false" >



          <?xml version="1.0" encoding="utf-8"?>
               width="100%" height="100%">
                         import mx.collections.ArrayCollection;
                         import mx.events.FlexEvent;
                         public var types : ArrayCollection;
                         override public function set data(value : Object) : void 
                          if(value != null)  
                              super.data = value;
                          // Dispatch the dataChange event.
                          dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
               <mx:Label text="{data.GroupLabel}" />
               <mx:ComboBox dataProvider="{types}" />