11 Replies Latest reply on Jan 24, 2007 2:31 PM by peterent

    How do you set different itemEditors?

    Pigg_Man Level 1
      I have a datagrid with two columns. I need to use two different item editors with the same column. Heres what I have in mxml.

      private function dgEditBegin (eventObj:DataGridEvent) : void {
      //Don't edit first column
      if (eventObj.columnIndex == 0)
      eventObj.preventDefault ();

      eventObj.preventDefault ();

      if (eventObj.rowIndex >= 1 && eventObj.rowIndex <= 7) {
      DataGridColumn (MyDataGrid.columns[1]).itemEditor = new ClassFactory(ComboBox);
      MyDataGrid.createItemEditor (eventObj.columnIndex, eventObj.rowIndex);
      } else {
      DataGridColumn (MyDataGrid.columns[1]).itemEditor = new ClassFactory(TextInput);
      MyDataGrid.createItemEditor (eventObj.columnIndex, eventObj.rowIndex);
      }
      }
      }

      <mx:DataGrid itemEditBegin="dgEditBegin(event);" editable="true" dataProvider="{DP}">
      <mx:columns>
      <mx:DataGridColumn headerText="Test" />
      <mx:DataGridColumn headerText="Test2" />
      </mx:columns>
      </mx:DataGrid>

      This works ... but how do you set it so the itemEditor is equal to an mxml class?
        • 1. Re: How do you set different itemEditors?
          peterent Level 2
          I think a better solution is to use a single MXML (or AS) class with 2 states. One state would be a ComboBox and the other a TextInput control. You would switch the states by overriding its updateDisplayList function:

          override public function updateDisplayList(unscaledWidth,unscaledHeight):void {
          super.updateDisplayList(unscaledWidth,unscaledHeight); // VERY IMPORTANT
          if( listData.rowIndex >= 1 && listData.rowIndex <= 7 ) currentState = "comboBoxState";
          else currentState = "";
          }

          This implies that the base state is the TextInput control.
          • 2. Re: How do you set different itemEditors?
            Pigg_Man Level 1
            So your suggesting to use an itemRenderer and then override the updateDisplayList functionality... The only problem is that I want everything to be displayed as a label and then when the user clicks on certain rows it uses a combobox, textinput, or a popup window with five checkboxes to edit the current row that they are on? Any more ideas or can I use the item renderer to perform this functionality?

            I added this new piece of code after the creation of the textinput to create the popup window.. I just replaced the else with an else if and then put this into an else

            var test_win:Test2 = Test2(PopUpManager.createPopUp(DisplayObject(this), Test2, true));
            PopUpManager.centerPopUp (test_win);
            • 3. Re: How do you set different itemEditors?
              peterent Level 2
              When you use an itemEditor, the editor shows only when the cell has focus. When it receives focus, its listData and data properties are set, then its updateDisplayList function is called. Using listData and data you can switch the component to the correct state.
              • 4. Re: How do you set different itemEditors?
                Pigg_Man Level 1
                could you give me a quick example of how you would do that?
                • 5. Re: How do you set different itemEditors?
                  peterent Level 2
                  The formatting in this forum is non-existent, but here is a possible component. It would be used in a DataGridColumn like this:

                  <mx:DataGridColumn headerText="Phone" dataField="phone"
                  itemEditor="editors.ComboOrTextEditor"
                  editorDataField="value"
                  />

                  The editors.ComboOrTextEditor.mxml file:

                  <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer"
                  verticalScrollPolicy="off"
                  horizontalScrollPolicy="off" >

                  <mx:Script>
                  <![CDATA[
                  import mx.controls.Text;
                  import mx.controls.listClasses.BaseListData;

                  private var _listData:BaseListData;
                  public function set listData( b:BaseListData ) : void
                  {
                  _listData = b;
                  }
                  public function get listData() : BaseListData
                  {
                  return _listData;
                  }

                  [Bindable]
                  private var _value:String;
                  public function set value(s:String) : void
                  {
                  _value = s;
                  }
                  public function get value() : String
                  {
                  return _value;
                  }

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                  {
                  super.updateDisplayList(unscaledWidth,unscaledHeight);

                  trace("-- updateDisplayList rowIndex="+listData.rowIndex);

                  if( listData.rowIndex == 2 || listData.rowIndex == 4 ) {
                  currentState = "comboState";
                  }
                  else {
                  currentState = "";
                  }
                  }

                  private function updateValue( event:Event ) : void
                  {
                  this.value = event.target.selectedItem as String;
                  }
                  ]]>
                  </mx:Script>
                  <mx:states>
                  <mx:State name="comboState">
                  <mx:RemoveChild target="{textinput1}"/>
                  <mx:AddChild position="lastChild">
                  <mx:ComboBox x="0" y="0" width="100%" height="100%" change="updateValue(event)">
                  <mx:dataProvider>
                  <mx:String>6-HELP</mx:String>
                  <mx:String>Corporate</mx:String>
                  <mx:String>911</mx:String>
                  </mx:dataProvider>
                  </mx:ComboBox>
                  </mx:AddChild>
                  </mx:State>
                  </mx:states>

                  <mx:TextInput x="0" y="0" width="100%" height="100%" id="textinput1" text="{_value}"/>

                  </mx:Canvas>
                  • 6. Re: How do you set different itemEditors?
                    Pigg_Man Level 1
                    hey ... thanks for that chunk of code.. it helped tons... one more question.. how would I display a popup window for editing purposes... Heres my xml code:

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:TitleWindow xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="352" height="146" title="State">

                    <mx:CheckBox x="10" y="10" label="any"/>
                    <mx:CheckBox x="121" y="10" label="established"/>
                    <mx:CheckBox x="250" y="10" label="invalid"/>
                    <mx:CheckBox x="10" y="36" label="new"/>
                    <mx:CheckBox x="121" y="36" label="related"/>
                    <mx:ControlBar>
                    <mx:HBox width="100%"/>
                    <mx:Button label="OK"/>
                    <mx:Button label="Cancel"/>
                    </mx:ControlBar>
                    </mx:TitleWindow>

                    I need to use these checkboxes to edit the current selected row along with the combobox and textinput. I added another state but the top of the window only is displayed when the item editor pops up. Basically only the title of the window is displayed because it only shows the width and height of the row. Should I do something different? How would you do this?
                    • 7. Re: How do you set different itemEditors?
                      peterent Level 2
                      You need to use the PopUpManager. There are examples of it in the Flex documentation.
                      • 8. Re: How do you set different itemEditors?
                        Pigg_Man Level 1
                        I understand how to use the popup manager:
                        var test_win:Test2 = Test2(PopUpManager.createPopUp(DisplayObject(this), Test2, true));
                        PopUpManager.centerPopUp(test_win);

                        How do you use it in your example so the entire window will be displayed?
                        • 9. Re: How do you set different itemEditors?
                          peterent Level 2
                          Don't use DisplayObject(this) - use Application.application or parentApplication. The window is being parented by the cell editor and you want it to be parented by the application to see all of it.
                          • 10. Re: How do you set different itemEditors?
                            Pigg_Man Level 1
                            I have this code in the updateDisplaylist

                            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                            //trace("updateDisplayList");
                            super.updateDisplayList(unscaledWidth,unscaledHeight);
                            if (listData.rowIndex == 1) {
                            currentState = "";
                            var test_win:Test2 = Test2(PopUpManager.createPopUp(DisplayObject(this.parentApplication), Test2, true));
                            PopUpManager.centerPopUp (test_win);
                            } else if (listData.rowIndex == 2 || listData.rowIndex == 3) {
                            currentState = "comboState";
                            } else {
                            currentState = "";
                            }
                            }

                            and it gives me this error:
                            TypeError: Error #1009: Cannot access a property or method of a null object reference.
                            at mx.controls::DataGrid/::itemEditorItemEditBeginHandler()
                            at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
                            at flash.events::EventDispatcher/dispatchEvent()
                            at mx.core::UIComponent/dispatchEvent()
                            at mx.controls::DataGrid/::commitEditedItemPosition()
                            at mx.controls::DataGrid/mx.controls:DataGrid::updateDisplayList()
                            at mx.core::UIComponent/validateDisplayList()
                            at mx.managers::LayoutManager/::validateDisplayList()
                            at mx.managers::LayoutManager/::doPhasedInstantiation()
                            at Function/ http://adobe.com/AS3/2006/builtin::apply()
                            at mx.core::UIComponent/::callLaterDispatcher2()
                            at mx.core::UIComponent/::callLaterDispatcher()
                            at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
                            at flash.utils::Timer/flash.utils:Timer::tick()
                            • 11. Re: How do you set different itemEditors?
                              peterent Level 2
                              You'll have to run it in the debugger and examine the variables to see how they are set. I ran the code I pasted above and that works.