7 Replies Latest reply on Nov 2, 2009 10:45 AM by larry_schwartz

    Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?

    larry_schwartz Level 1

      When working with AdvancedDataGridRendererProvider in an Advanced Datagrid -- Is it possible for renderer code to reference the columnIndex parameter of the AdvancedDataGridRendererProvider?

       

      Thanks.

        • 1. Re: Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?
          paul.williams Level 4

          Not sure I fully understand what you are trying to do, but if you want to get the columnIndex from code within a renderer then take a look at the AdvancedDataGridListData class and the IDropInListItemRenderer interface:

           

          http://livedocs.adobe.com/flex/3/langref/mx/controls/advancedDataGridClasses/AdvancedDataG ridListData.html

          http://livedocs.adobe.com/flex/3/langref/mx/controls/listClasses/IDropInListItemRenderer.h tml

          • 2. Re: Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?
            larry_schwartz Level 1

            I appreciate your answer, but I'm really not sure how to implement it.

             

            I'm trying to write a renderer that I can reuse for all columns in my datagrid.

             

            The code in it is conditional based on the specific column it is currently being used on.

             

            So, for example, if I have 10 AdvancedDataGridColumns in an AdvancedDataGrid, each with their dataField being "TheCol01", "TheCol02", "TheCol03", etc., I know I can explicitly reference the column in the renderer with the code:

             

            data['TheCol09']

             

            However, this way, I'd have to write 10 different renderers.

             

            What I'm looking for is a way, within the renderer, to determine the "columnIndex" parameter of the AdvancedDataGridRendererProvider tag that called the renderer. This way, for example, I could have conditional code like:

             

            switch(columnIndex)

            {

                 case 1:

                      myVarValue = data['TheCol01'];

                      //Now do something only relevant to the data in TheCol01

                      break;

                 case 2:

                      myVarValue = data['TheCol02'];

                      //Now do something only relevant to the data in TheCol02

                      break;

                 case 3:

                      myVarValue = data['TheCol03'];

                      //Now do something only relevant to the data in TheCol03

                      break;

            }

             

            Does this help explain what I'm trying to do?

             

            Thank you.

            • 3. Re: Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?
              paul.williams Level 4

              I've attached two examples that use properties of AdvancedDataGridListData so that they can be reused in different columns. The first is an MXML example that extends Canvas and uses bindings to set text and tooltip on a Label control. The second achieves similar functionality in ActionScript by extending UIComponent. The tooltip displays some of the information that is available to you via the AdvancedDataGridListData object.

               

              The AdvancedDataGrid will inject an instance of AdvancedDataGridListData into any item renderer that implements the IDropInListItemRenderer interface. In order to implement this interface you use the 'implements' keyword when declaring the class and add getters and setters for the listData property. I've done this for each renderer in the example.

               

              While the MXML example is simpler, the ActionScript example should perform better.

              • 4. Re: Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?
                larry_schwartz Level 1

                Thanks so much for these examples, I appreciate the help. I'll dig in and let you know how it goes.

                • 5. Re: Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?
                  larry_schwartz Level 1

                  Thanks so much for the code.  It was exactly what I needed.  Once I saw it I completely understood what you were doing.

                  • 6. Re: Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?
                    GeorgeWS Level 1

                    Can you post the code, I cannot seem to save or open the .zip

                    • 7. Re: Advanced DataGrid - Renderers - Possible to reference the columnIndex parameter?
                      larry_schwartz Level 1

                      //*** START ActionScriptRenderer.as

                       

                       

                      package
                      {
                          import mx.controls.Label;
                          import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
                          import mx.controls.listClasses.BaseListData;
                          import mx.controls.listClasses.IDropInListItemRenderer;
                          import mx.controls.listClasses.IListItemRenderer;
                          import mx.core.UIComponent;
                         
                          public class ActionScriptRenderer
                              extends UIComponent
                              implements IListItemRenderer, IDropInListItemRenderer
                          {   
                              private var _label : Label;
                              private var _data : Object;
                              private var _listData : BaseListData;
                              private var _listDataChanged : Boolean = true;
                             
                              public function set data( value : Object ) : void
                              {
                                  _data = value;   
                              }
                             
                              public function get data() : Object
                              {
                                  return _data;
                              }
                             
                              public function set listData(
                                  value : BaseListData ) : void
                              {
                                  _listData = value;
                                 
                                  _listDataChanged = true;
                                 
                                  invalidateProperties();
                              }
                             
                              public function get listData() : BaseListData
                              {
                                  return _listData;
                              }
                             
                              protected override function createChildren() : void
                              {
                                  super.createChildren();
                                 
                                  _label = new Label();
                                  addChild( _label );
                              }
                             
                              protected override function commitProperties() : void
                              {
                                  super.commitProperties();
                                 
                                  if ( _listDataChanged &&
                                      _listData != null )
                                  {
                                      _label.text = listData.label;
                                      _label.toolTip = getToolTip();
                                     
                                      _listDataChanged = false;
                                  }   
                              }
                             
                              protected override function updateDisplayList(
                                  unscaledWidth : Number,
                                  unscaledHeight : Number ) : void
                              {
                                  super.updateDisplayList(
                                      unscaledWidth,
                                      unscaledHeight );
                                 
                                  _label.move( 0, 0 );
                                  _label.setActualSize(
                                      unscaledWidth,
                                      unscaledHeight );   
                              }
                              
                              private function getToolTip() : String
                              {
                                  var adgListData : AdvancedDataGridListData =
                                      AdvancedDataGridListData( _listData );
                                 
                                  var result : String = "";
                                  result += "Label: " + adgListData.label + "\n";
                                  result += "Column Index: " + adgListData.columnIndex + "\n";
                                  result += "Data Field: " + adgListData.dataField + "\n";
                                  result += "Data Field Value: " + adgListData.item[ adgListData.dataField ] + "\n";
                                  result += "Row Index: " + adgListData.rowIndex + "\n";
                                  result += "Depth: " + adgListData.depth + "\n";
                                  result += "Has Children: " + adgListData.hasChildren;
                                 
                                  return result;
                              }
                          }
                      }

                       

                       

                       

                       

                      //*** END ActionScriptRenderer.as

                       

                       

                       

                      //*** START ListDataDemo.mxml

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application
                          xmlns:mx="http://www.adobe.com/2006/mxml"
                          layout="vertical">
                         
                          <mx:Script>
                              <![CDATA[
                                  import mx.collections.ArrayCollection;
                                 
                                   [Bindable]
                                   private var dpADG:ArrayCollection = new ArrayCollection([
                                     {Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
                                     {Artist:'Pavement', Album:'Brighten the Corners', Price:11.99},
                                     {Artist:'Saner', Album:'A Child Once', Price:11.99},
                                     {Artist:'Saner', Album:'Helium Wings', Price:12.99},
                                     {Artist:'The Doors', Album:'The Doors', Price:10.99},
                                     {Artist:'The Doors', Album:'Morrison Hotel', Price:12.99},
                                     {Artist:'Grateful Dead', Album:'American Beauty', Price:11.99},
                                     {Artist:'Grateful Dead', Album:'In the Dark', Price:11.99},
                                     {Artist:'Grateful Dead', Album:'Shakedown Street', Price:11.99},
                                     {Artist:'The Doors', Album:'Strange Days', Price:12.99},
                                     {Artist:'The Doors', Album:'The Best of the Doors', Price:10.99}
                                   ]);
                                 
                              ]]>
                          </mx:Script>
                         
                          <mx:Label
                                 text="MxmlRenderer"
                                 color="#ffffff"
                                 fontWeight="bold"/>
                         
                          <mx:AdvancedDataGrid
                              height="250"
                              width="500"
                              rowHeight="25"
                              dataProvider="{ dpADG }">
                             
                              <mx:columns>
                                  <mx:AdvancedDataGridColumn
                                      dataField="Artist"/>
                                  <mx:AdvancedDataGridColumn
                                      dataField="Album"/>
                                  <mx:AdvancedDataGridColumn
                                      dataField="Price"/>  
                              </mx:columns>
                             
                              <mx:rendererProviders>           
                                  <mx:AdvancedDataGridRendererProvider
                                      renderer="MxmlRenderer"
                                      columnIndex="0"/>
                                  <mx:AdvancedDataGridRendererProvider
                                      renderer="MxmlRenderer"
                                      columnIndex="1"/>
                                  <mx:AdvancedDataGridRendererProvider
                                      renderer="MxmlRenderer"
                                      columnIndex="2"/>        
                              </mx:rendererProviders>
                             
                          </mx:AdvancedDataGrid>
                        
                             <mx:Label
                                 text="ActionScriptRenderer"
                                 color="#ffffff"
                                 fontWeight="bold"/>
                        
                             <mx:AdvancedDataGrid
                              height="250"
                              width="500"
                              rowHeight="25"
                              dataProvider="{ dpADG }">
                             
                              <mx:columns>
                                  <mx:AdvancedDataGridColumn
                                      dataField="Artist"/>
                                  <mx:AdvancedDataGridColumn
                                      dataField="Album"/>
                                  <mx:AdvancedDataGridColumn
                                      dataField="Price"/>  
                              </mx:columns>
                             
                              <mx:rendererProviders>           
                                  <mx:AdvancedDataGridRendererProvider
                                      renderer="ActionScriptRenderer"
                                      columnIndex="0"/>
                                  <mx:AdvancedDataGridRendererProvider
                                      renderer="ActionScriptRenderer"
                                      columnIndex="1"/>
                                  <mx:AdvancedDataGridRendererProvider
                                      renderer="ActionScriptRenderer"
                                      columnIndex="2"/>        
                              </mx:rendererProviders>
                             
                         </mx:AdvancedDataGrid>
                         
                      </mx:Application>

                       

                       

                       

                       

                       

                      //*** END ListDataDemo.mxml

                       

                       

                       

                       

                      //*** START MxmlRenderer.mxml

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Canvas
                          xmlns:mx="http://www.adobe.com/2006/mxml"
                          implements="mx.controls.listClasses.IDropInListItemRenderer">
                         
                          <mx:Script>
                              <![CDATA[
                                  import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;
                                  import mx.controls.listClasses.BaseListData;
                                 
                                  [Bindable]
                                  private var _listData : BaseListData;
                                 
                                  public function set listData( value : BaseListData ) : void
                                  {
                                      _listData = value;
                                  }
                                 
                                  public function get listData() : BaseListData
                                  {
                                      return _listData;
                                  }
                                 
                                  private function getToolTip(
                                      listData : BaseListData ) : String
                                  {
                                      var adgListData : AdvancedDataGridListData =
                                          AdvancedDataGridListData( listData );
                                     
                                      var result : String = "";
                                      result += "Label: " + adgListData.label + "\n";
                                      result += "Column Index: " + adgListData.columnIndex + "\n";
                                      result += "Data Field: " + adgListData.dataField + "\n";
                                      result += "Data Field Value: " + adgListData.item[ adgListData.dataField ] + "\n";
                                      result += "Row Index: " + adgListData.rowIndex + "\n";
                                      result += "Depth: " + adgListData.depth + "\n";
                                      result += "Has Children: " + adgListData.hasChildren;
                                     
                                      return result;
                                  }
                                 
                              ]]>
                          </mx:Script>
                         
                          <mx:Label
                              id="canvasLabel"
                              text="{ _listData.label }"
                              toolTip="{ getToolTip( _listData ) }"/>
                             
                      </mx:Canvas>

                       

                       

                       

                       

                      //*** END MxmlRenderer.mxml