5 Replies Latest reply on Apr 18, 2011 7:48 PM by Flex harUI

    DataGrid is getting columns at the run time (Flex 4.5)

    Zolotoj Level 3

      Initially my DataGrid which has the following columns:

      person_id, name, wroknumber

       

      is set to have dataProvider to this:

      <item>
        <id>0</id>
      </item>

       

      At the running time the grid shows an empty row.

      Using a custom item renderer I am executing the following code on Change event:

      DataGrid(owner).dataProvider[rowIndex][column.dataField] = "somevalue";

       

      What is happening at this point is that dataProvider is getting a new column. If I trace it then it looks like this:

      <item>
        <id>0</id>
        <worknum>6593</worknum>
      </item>

       

      It is probably right but I want to know what are mechanics behind that.

       

      Thanks

        • 1. Re: DataGrid is getting columns at the run time (Flex 4.5)
          Flex harUI Adobe Employee

          Post a 20-line test case.

          • 2. Re: DataGrid is getting columns at the run time (Flex 4.5)
            Zolotoj Level 3

            Hope that will help:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                              xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="init()" 
                              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
                 <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                      <fx:XMLList id="personnelData" xmlns="">
                           <consistpersonnel>
                                <id>0</id>
                           </consistpersonnel>
                      </fx:XMLList>
                      <fx:XMLList id="crew" xmlns="">
                           <item>
                                <person>Conductor</person>
                                <person_id>1</person_id>
                           </item>
                           <item>
                                <person>Engineer</person>
                                <person_id>2</person_id>
                           </item>
                           <item>
                                <person>Helper</person>
                                <person_id>3</person_id>
                           </item>
                      </fx:XMLList>
                 </fx:Declarations>
                 <fx:Script>
                      <![CDATA[
                           import mx.collections.ArrayCollection;
                           import mx.collections.ICollectionView;
                           import mx.collections.IList;
                           import mx.collections.XMLListCollection;
                           import mx.events.CollectionEvent;
                           import mx.events.DataGridEvent;
                           import mx.events.DynamicEvent;
                           import mx.events.ListEvent;
                           
                           import spark.events.GridItemEditorEvent;
                           private function init():void
                           {
                                personnel.dataProvider = new XMLListCollection(personnelData);
                                personnel.validateNow();
                                var PersonnelPerson:ClassFactory = new ClassFactory(dropdownRendererDataGrid);
                                PersonnelPerson.properties = {labelField : "person", dataProvider :
                                new XMLListCollection(crew)};
                                var col:GridColumn = GridColumn(personnel.columns.getItemAt(0));                         
                                col.itemRenderer = PersonnelPerson;
                           }
                      ]]>
                 </fx:Script>
                 <s:VGroup>          
                 <s:Button click="{trace(personnel.dataProvider)}" label="Trace DP"/>
                 <s:DataGrid requestedRowCount="4" fontSize="11" sortableColumns="false"
                                id="personnel" rowHeight="22" height="100%">
                      <s:columns>
                           <s:ArrayList>
                                <s:GridColumn dataField="person_id" headerText="Person" width="95">
                                     <s:itemRenderer>
                                          <fx:Component>
                                               <s:GridItemRenderer>
                                                    <s:layout>
                                                         <s:VerticalLayout paddingLeft="2" 
                                                                               verticalAlign="middle"/>
                                                    </s:layout>
                                               </s:GridItemRenderer>
                                          </fx:Component>
                                     </s:itemRenderer>
                                </s:GridColumn>     
                           </s:ArrayList>                         
                      </s:columns>
                 </s:DataGrid>
                 </s:VGroup>     
            </s:Application>
            
            and package with custom renderer:
            
            package 
            {
                 import flash.events.Event;
                 import flash.events.KeyboardEvent;
                 import flash.events.MouseEvent;
                 
                 import mx.collections.IList;
                 
                 import spark.components.DataGrid;
                 import spark.components.DropDownList;
                 import spark.components.Grid;
                 import spark.components.List;
                 import spark.components.gridClasses.GridColumn;
                 import spark.components.gridClasses.IGridItemRenderer;
                 import spark.events.DropDownEvent;
                 import spark.skins.spark.DropDownListSkin;
            
                 public class dropdownRendererDataGrid extends DropDownList implements IGridItemRenderer
                 {
                      private var _columnIndex:int;
                      private var _data:Object;
                      private var _column:GridColumn;
                      private var bSelectedValueSet:Boolean = false;
                      private var _rowIndex:int;
                      public function dropdownRendererDataGrid()
                      {
                           super();
                           addEventListener("change", onDataChange);
                      }
                      public function get rowIndex():int
                      {
                           return _rowIndex;
                      }
                      
                      public function set rowIndex(value:int):void
                      {
                           _rowIndex = value;
                      }
                      
                      public function get dragging():Boolean
                      {
                           return false;
                      }
                      
                      public function set dragging(value:Boolean):void
                      {
                      }
                      
                      public function get hovered():Boolean
                      {
                           return false;
                      }
                      
                      public function set hovered(value:Boolean):void
                      {
                           
                      }
                      
                      public function get label():String
                      {
                           return null;
                      }
                      
                      public function set label(value:String):void
                      {
                      }
                      
                      public function get selected():Boolean
                      {                    
                           return false;     
                      }
                      
                      public function set selected(value:Boolean):void
                      {
                           
                      }
                      
                      public function get showsCaret():Boolean
                      {
                           return false;
                      }
                      
                      public function set showsCaret(value:Boolean):void
                      {
                      }
                      
                      public function get column():GridColumn
                      {
                           return _column;
                      }
                      
                      public function set column(value:GridColumn):void
                      {
                           _column = value;
                      }
                      public function get grid():Grid
                      {
                           return null;
                      }
                      
                      public function set grid(value:Grid):void
                      {
                      }
                      public function prepare(willBeRecycled:Boolean):void
                      {
                      }
                      
                      public function discard(hasBeenRecycled:Boolean):void
                      {
                      }
                      
                      public function get data():Object
                      {
                           return null;
                      }
                      
                      public function set data(value:Object):void
                      {
                           _data = value;
                           for (var i:int=0;i<dataProvider.length;i++)
                           {
                                // Check if is selectedValue
                                if(dataProvider[i][column.dataField] == value[column.dataField])
                                {
                                     if(selectedIndex != i)                              
                                          selectedIndex = i;
                                     break;
                                }
                           } 
                           if (i == dataProvider.length)
                                selectedIndex = -1;
            
                      }
                      override public function stylesInitialized():void 
                      {
                           super.stylesInitialized();
                           setStyle("skinClass", DropDownListSkin);
                      }
                      protected function onDataChange(event:Event):void
                      {                                             
                           if (DataGrid(owner).selectedIndex != rowIndex)
                           {     
                                DataGrid(owner).selectedIndex = rowIndex;
                           }
                           DataGrid(owner).dataProvider[rowIndex][column.dataField] = selectedItem[column.dataField];
                      }
                      public function get columnIndex():int
                      {
                           return _columnIndex;
                      }     
                      public function set columnIndex(value:int):void
                      {
                           _columnIndex = value;
                      }
                      public function get down():Boolean
                      {
                           return false;
                      }
                      
                      public function set down(value:Boolean):void
                      {
                      }
                 }
            }
            
            

            Click Print DP then select something from the dropdown and click Print DP again. You should see something like this:

            <consistpersonnel>
              <id>0</id>
            </consistpersonnel>
            <consistpersonnel>
              <id>0</id>
              <person_id>2</person_id>
            </consistpersonnel>

             

            Thank you for help.

            • 3. Re: DataGrid is getting columns at the run time (Flex 4.5)
              Flex harUI Adobe Employee

              I didn't run the test case but I noticed that the onDataChange handler is

              modifying the dataprovider objects

              • 4. Re: DataGrid is getting columns at the run time (Flex 4.5)
                Zolotoj Level 3

                Yes, correct. It's my understanding that I have to do that in order to have the grid carrying newly entered data. Althought having full data binding is probably better.

                • 5. Re: DataGrid is getting columns at the run time (Flex 4.5)
                  Flex harUI Adobe Employee

                  Typically, modifications to the data are done via itemEditors.  See the doc.

                  Renderers generally should not modify the data, especially on the dataChange

                  event.