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

    AdvancedDataGridRendererProvider spanning Grouping Column

    NewbieToFlex

      Hi,

       

      I am trying to span just the Grouping Column.

       

      Sample Data:

      Southwest

                          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

          Hi,

           

          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:

          testAdvancedDataGridSpanningColumn.mxml

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
               <mx:Script>
                    <![CDATA[
                         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;
                            
                      [Bindable]
                      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"}
                      ]);
                      
                      [Bindable]
                      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
                           myGCol1.refresh();                    
                      }
                      
                      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;
                           myADG2.rendererProviders.push(rp);
                           
                           myADG2.validateNow();
                      }
                    ]]>
               </mx:Script>
               <mx:Panel
                    title="Advanced DataGrid Control Example"
                    height="75%"
                    width="75%"
                    layout="horizontal"
                    paddingTop="10"
                    paddingBottom="10"
                    paddingLeft="10"
                    paddingRight="10">
                    <mx:AdvancedDataGrid
                         id="myADG2"
                         width="100%"
                         height="100%"
                         creationComplete="initDG()" initialize="createColumns();"  sortExpertMode="true" showHeaders="false" >
                    </mx:AdvancedDataGrid>     
               </mx:Panel>
          </mx:Application>
          

           

          TestRenderer.mxml

          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox 
               xmlns:mx="http://www.adobe.com/2006/mxml" 
               width="100%" height="100%">
               <mx:Script>
                    <![CDATA[
                         import mx.collections.ArrayCollection;
                         import mx.events.FlexEvent;
                         
                         [Bindable]
                         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:Script>
               
               <mx:Label text="{data.GroupLabel}" />
               <mx:ComboBox dataProvider="{types}" />
          </mx:HBox>