1 Reply Latest reply on Dec 8, 2011 12:30 PM by Code Girl

    Tab not working properly for Datagrid ItemEditor ComboBox

    Code Girl Level 1

      When you run the app type a1 in the find an App combo box then hit the tab key.

      Click in the 3rd row in the As Bs column and a combobox will show.

      Type a3 and then hit enter.  Notice that A3 is saved as the selected item and saved to the dataprovider

      Hit the backspace key and hit enter.  Notice that the  null is saved and nothing is selected.

      Type a3 again and hit enter.

      Hit the backspce again but this time hit the tab key.  Notice the previous value is back.  ooops.

       

       

      {Code}

      <?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"

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

                     xmlns:vo="valueObjects.*"

                     width="100%" height="100%">

          <fx:Script>

              <![CDATA[

                  import mx.collections.ArrayCollection;

                  import mx.events.FlexEvent;

                 

                  protected function aCBLabel(item:Object):String

                  {

                      if (item != null)

                          return item.name;

                      else

                          return "";

                  }

                 

                  protected function bDG_creationCompleteHandler(event:FlexEvent):void

                  {

                      bDG.selectedIndex = 0;

                  }

                 

                  protected function bAFormat(item:Object, column:DataGridColumn):String

                  {

                      if (item [column.dataField] != null)

                          return item [column.dataField].name;

                      else

                          return "";

                  }

              ]]>

          </fx:Script>

          <fx:Declarations>

              <vo:ADto id="aDto"/>

              <vo:BDto id="bDto"/>

              <s:ArrayCollection id="aList">

                  <vo:ADto>

                      <vo:id>1</vo:id>

                      <vo:name>a1</vo:name>

                      <vo:bs>

                          <vo:BDto>

                              <vo:id>1</vo:id>

                              <vo:aDto>

                                  <vo:ADto>

                                      <vo:id>1</vo:id>

                                      <vo:name>a1</vo:name>

                                  </vo:ADto>

                              </vo:aDto>

                          </vo:BDto>

                          <vo:BDto>

                              <vo:id>2</vo:id>

                              <vo:aDto>

                                  <vo:ADto>

                                      <vo:id>2</vo:id>

                                      <vo:name>a2</vo:name>

                                  </vo:ADto>

                              </vo:aDto>

                          </vo:BDto>

                          <vo:BDto>

                              <vo:id>0</vo:id>

                          </vo:BDto>

                      </vo:bs>

                  </vo:ADto>

                  <vo:ADto>

                      <vo:id>2</vo:id>

                      <vo:name>a2</vo:name>

                      <vo:bs>

                          <vo:BDto>

                              <vo:id>3</vo:id>

                              <vo:aDto>

                                  <vo:ADto>

                                      <vo:id>3</vo:id>

                                      <vo:name>a3</vo:name>

                                  </vo:ADto>

                              </vo:aDto>

                          </vo:BDto>

                          <vo:BDto>

                              <vo:id>0</vo:id>

                          </vo:BDto>

                      </vo:bs>

                  </vo:ADto>

              </s:ArrayCollection>

              <s:ArrayCollection id="bAList">

                  <vo:ADto>

                      <vo:id>1</vo:id>

                      <vo:name>a1</vo:name>

                  </vo:ADto>

                  <vo:ADto>

                      <vo:id>2</vo:id>

                      <vo:name>a2</vo:name>

                  </vo:ADto>

                  <vo:ADto>

                      <vo:id>3</vo:id>

                      <vo:name>a3</vo:name>

                  </vo:ADto>

              </s:ArrayCollection>

          </fx:Declarations>

          <fx:Binding source="aCB.selectedItem as ADto" destination="aDto"/>

          <s:Form id="AForm" width="700" height="170">

              <s:layout>

                  <s:BasicLayout/>

              </s:layout>

              <s:HGroup x="0" y="50" width="670" height="60">

                  <s:Label height="25" fontWeight="bold" text="Find an A" verticalAlign="middle"/>

                  <s:ComboBox id='aCB'

                              prompt="Enter or Select an A Name"

                              labelFunction="aCBLabel"

                              x="110" y="10" width="375">

                      <mx:ArrayCollection id="asList" list="{aList}"/>

                  </s:ComboBox>

              </s:HGroup>

          </s:Form>

          <mx:DataGrid id="bDG" x="10" y="140" width="450" height="200"

                       editable="true"

                       dataProvider="{aDto.bs}"

                       creationComplete="bDG_creationCompleteHandler(event)">

              <mx:columns>

                  <mx:DataGridColumn id="bidDC"

                                     headerText="id"

                                     editable="true"

                                     dataField="id"

                                     editorDataField="value"

                                     width="50"/>

                  <mx:DataGridColumn id="bNameDC"

                                     headerText="As Bs"

                                     editable="true"

                                     dataField="aDto"

                                     labelFunction="bAFormat"

                                     editorDataField="value"

                                     width="150">

                      <mx:itemEditor>

                          <fx:Component>

                              <s:MXDataGridItemRenderer implements="mx.managers.IFocusManagerComponent">

                                  <fx:Script>

                                      <![CDATA[

                                          import mx.collections.ArrayCollection;

                                          import mx.controls.dataGridClasses.DataGridListData;

                                          import mx.controls.listClasses.BaseListData;

                                          import mx.events.FlexEvent;

                                         

                                          import spark.events.DropDownEvent;

                                          import spark.events.IndexChangeEvent;

                                         

                                          [Bindable]

                                          public var bAs:ArrayCollection;

                                         

                                          protected function cb_InitializeHandler(event:FlexEvent):void

                                          {

                                              bAs = outerDocument.bAList;

                                              aDto = outerDocument.bDG.selectedItem.aDto;

                                              if (aDto != null)

                                              {

                                                  var t:ADto;

                                                  for (var i:int = 0; i<bAs.length; i++)

                                                  {

                                                      t = bAs[i];

                                                      if (aDto.id == t.id)

                                                      {

                                                          cb.selectedIndex = i;

                                                          break;

                                                      }

                                                  }

                                              }

                                          }

                                         

                                          override public function setFocus():void

                                          {

                                              cb.setFocus();

                                          }

                                         

                                          public function get value():ADto

                                          {

                                              if (cb.isDropDownOpen)

                                                  cb.closeDropDown(true);

                                              cb.validateNow();

                                              aDto = cb.selectedItem as ADto;

                                              return aDto

                                          }

                                         

                                         

                                          protected function cb_closeHandler(event:DropDownEvent):void

                                          {

                                              aDto = cb.selectedItem as ADto;

                                          }

                                         

                                      ]]>

                                  </fx:Script>

                                  <fx:Declarations>

                                      <vo:ADto id="aDto"/>

                                      <!-- Place non-visual elements (e.g., services, value objects) here -->

                                  </fx:Declarations>

                                  <s:ComboBox id="cb"

                                                  width = "100%"

                                                  prompt="{aDto.name}"

                                                  dataProvider="{bAs}"

                                                  labelField="name"

                                                  initialize="cb_InitializeHandler(event)"

                                                  close="cb_closeHandler(event)">

                                  </s:ComboBox>

                              </s:MXDataGridItemRenderer>

                          </fx:Component>

                      </mx:itemEditor>

                  </mx:DataGridColumn>

              </mx:columns>

          </mx:DataGrid>

      </s:Application>

      {Code}

       

      {Code}

      package valueObjects

      {

          import com.adobe.fiber.services.IFiberManagingService;

          import com.adobe.fiber.valueobjects.IValueObject;

          import mx.collections.ArrayCollection;

          import valueObjects.BDto;

          import com.adobe.fiber.core.model_internal;

         

          use namespace model_internal;

         

          public class ADto implements com.adobe.fiber.valueobjects.IValueObject

          {

              private var _internal_id : int;

              private var _internal_name : String;

              private var _internal_bs : ArrayCollection;

              model_internal var _internal_bs_leaf:valueObjects.BDto;

             

              public function ADto()

              {

              }

             

              public function get id() : int

              {

                  return _internal_id;

              }

             

              public function get name() : String

              {

                  return _internal_name;

              }

             

              public function get bs() : ArrayCollection

              {

                  return _internal_bs;

              }

             

              public function set id(value:int) : void

              {

                  var oldValue:int = _internal_id;

                  if (oldValue !== value)

                  {

                      _internal_id = value;

                  }

              }

             

              public function set name(value:String) : void

              {

                  var oldValue:String = _internal_name;

                  if (oldValue !== value)

                  {

                      _internal_name = value;

                  }

              }

             

              public function set bs(value:*) : void

              {

                  var oldValue:ArrayCollection = _internal_bs;

                  if (oldValue !== value)

                  {

                      if (value is ArrayCollection)

                      {

                          _internal_bs = value;

                      }

                      else if (value is Array)

                      {

                          _internal_bs = new ArrayCollection(value);

                      }

                      else if (value == null)

                      {

                          _internal_bs = null;

                      }

                      else

                      {

                          throw new Error("value of bs must be a collection");

                      }

                  }

              }

             

              private var _managingService:com.adobe.fiber.services.IFiberManagingService;

             

              public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void

              {

                  _managingService = managingService;

              }

          }

      }

      {Code}

       

      {Code}

      package valueObjects

      {

      import com.adobe.fiber.core.model_internal;

      import com.adobe.fiber.services.IFiberManagingService;

      import com.adobe.fiber.valueobjects.IValueObject;

      import valueObjects.ADto;

       

      import mx.collections.ArrayCollection;

       

      use namespace model_internal;

       

      public class BDto implements com.adobe.fiber.valueobjects.IValueObject

      {

          private var _internal_id : int;

          private var _internal_aDto : ADto;

          private static var emptyArray:Array = new Array();

       

          public function BDto()

          {

              _internal_id = 0;

          }

       

          public function get id() : int

          {

              return _internal_id;

          }

       

          public function get aDto() : ADto

          {

              return _internal_aDto;

          }

       

          public function set id(value:int) : void

          {

              var oldValue:int = _internal_id;

              if (oldValue !== value)

              {

                  _internal_id = value;

              }

          }

       

          public function set aDto(value:ADto) : void

          {

              var oldValue:ADto = _internal_aDto;

              if (oldValue !== value)

              {

                  _internal_aDto = value;

              }

          }

       

          private var _managingService:com.adobe.fiber.services.IFiberManagingService;

       

          public function set managingService(managingService:com.adobe.fiber.services.IFiberManagi ngService):void

          {

              _managingService = managingService;

          }

      }

      }

      {Code}