6 Replies Latest reply on Nov 19, 2010 6:18 AM by jfb00

    item renderer issue

    jfb00 Level 3

      Hi,

      I have a comboBox as item renderer in my datagrid (comboBox item renderer code bellow).

      1. How can I remove the first blank item? My comboBox arrayCollection doesn't have 0 item.

      2. If I come back to the cell that it was already selected with a value from my comboBox, how can I set the selected item of my comboBox to be the same as the previus value? If I leave the comboBox without selection it will be blank as the 0 element.

      Please help.

      Thanks

       

      Johnny

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
                   labelField="label" dataProvider="{acCombo}" rowCount="20"
                   change="onSelectionChange(event)" creationComplete="init()">
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.controls.dataGridClasses.DataGridListData;
                  import mx.events.ListEvent;
                  import mx.rpc.events.ResultEvent;
                 
                  [Bindable]private var acCombo:ArrayCollection = new ArrayCollection ([{id:1, label:"Item 01"},{id:2, label:"Item 02"},{id:3, label:"Item 03"},
                      {id:4, label:"Item 04"},{id:5, label:"Item 05"}]);
                  ;
                  private var _ownerData:Object;
                 
                  public function init():void
                  {
                      //init code
                  }
                 
                  override public function set data(value:Object):void
                  {
                      if (value){
                          _ownerData = value as Object;
                         
                          var col:DataGridListData = DataGridListData(listData);
                          var item:Object = new Object;
                          var clabel:String = value[col.dataField];
                          var cid:int = value.id;
                         
                          item.label = clabel;
                          item.id = cid;
                         
                          selectedItem = item;
                      }
                  }
                  override public function get data():Object
                  {
                      return _ownerData;
                  }
                 
                  override public function setFocus():void
                  {
                      super.setFocus();
                      open();
                  }
                 
                  private function onSelectionChange(e:ListEvent):void
                  {
                      if(selectedItem && _ownerData){
                          var col:DataGridListData = DataGridListData(listData);
                          var clabel:String = selectedItem.label;
                          var cid:int = selectedItem.id;
                         
                          _ownerData[col.dataField] = clabel;
                          _ownerData[id] = cid;
                      }
                  }
              ]]>
          </mx:Script>
      </mx:ComboBox>

        • 1. Re: item renderer issue
          Matt Le Fevre Level 4

          unless i'm missing something, in the mxml set the selected index to 1?

           

          or you could hardcode in the dataprovider, eg:

           

          <mx:ComboBox id="comb1">
          <mx:dataProvider>
               <mx:Array>
               <mx:String>Item01</mx:String>
               </mx:Array>
               <mx:Array>
               <mx:String>Item02</mx:String>
               </mx:Array>
               <mx:Array>
               <mx:String>Item03</mx:String>
               </mx:Array>
               <mx:Array>
               <mx:String>Item04</mx:String>
               </mx:Array>
               <mx:Array>
               <mx:String>Item05</mx:String>
               </mx:Array>
               <mx:Array>
                <mx:String>Item06</mx:String>
               </mx:Array>
          </mx:dataProvider>
          </mx:ComboBox>
          
          • 2. Re: item renderer issue
            jfb00 Level 3

            Hello,

            That doesn't work.

            In the debug, after the step selectedItem = item; the selectedItem is null but I can see values for the label and id.

            I'm probably missing something simple.

            Any other ideas?
            Thanks!

             

            Johnny

            • 3. Re: item renderer issue
              jfb00 Level 3

              Hi,

              I created a sample, maybe someone can see the issue for me

              Thanks!

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html"
                              creationComplete="init()">
                  
                  <mx:Script>
                      <![CDATA[
                          import mx.events.CollectionEvent;
                          import mx.events.DataGridEvent;
                          import com.myItemEditor;
                          import mx.collections.ArrayCollection;
                          
                          [Bindable] private var acExecution:ArrayCollection = new ArrayCollection([
                              {Territory:"Arizona", Territory_Rep:"Barbara Jennings", ITEM_ID:1, ITEM_NAME:"Item 01"}, 
                              {Territory:"Central California", Territory_Rep:"Joe Smith", ITEM_ID:2, ITEM_NAME:"Item 02"}, 
                              {Territory:"Nevada", Territory_Rep:"Bethany Pittman", ITEM_ID:2, ITEM_NAME:"Item 02"},  
                              {Territory:"Northern California", Territory_Rep:"T.R. Smith", ITEM_ID:1, ITEM_NAME:"Item 01"}, 
                              {Territory:"Southern California", Territory_Rep:"Jane Grove", ITEM_ID:3, ITEM_NAME:"Item 03"}
                          ]);
                          
                          private function init():void
                          {
                              
                          }
                          
                          private function onItemEditEnd(e:DataGridEvent):void
                          {
                              var cEditor:myItemEditor = dgCustomEditor.itemEditorInstance as myItemEditor;
                              var item:Object = cEditor.selectedItem;
                              acExecution.refresh();
                          }
                          
                      ]]>
                  </mx:Script>
                  
                  <mx:DataGrid id="dgCustomEditor" dataProvider="{acExecution}" height="160"
                               editable="true" itemEditEnd="onItemEditEnd(event)">
                      <mx:columns>
                          <mx:DataGridColumn headerText="Territory" dataField="Territory" width="60"
                                             editable="false"/>
                          <mx:DataGridColumn headerText="Territory Rep" dataField="Territory_Rep" width="60"
                                             editable="false"/>
                          <mx:DataGridColumn headerText="Item ID" dataField="ITEM_ID" width="60"
                                             editable="false"/>
                          <mx:DataGridColumn headerText="Item Name" dataField="ITEM_NAME" width="160" itemEditor="com.myItemEditor" />
                      </mx:columns>
                  </mx:DataGrid>
                  
              </mx:Application>
              

               

              Item Editor component

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" 
                           labelField="LABEL" dataProvider="{acCombo}" rowCount="20" 
                           change="onSelectionChange(event)" creationComplete="init()">
                  <mx:Script>
                      <![CDATA[
                          import mx.events.ListEvent;
                          import mx.controls.dataGridClasses.DataGridListData;
                          import mx.rpc.events.ResultEvent;
                          import mx.collections.ArrayCollection;
                          
                          [Bindable]private var acCombo:ArrayCollection = new ArrayCollection ([{ID:1, LABEL:"Item 01"},{ID:2, LABEL:"Item 02"},{ID:3, LABEL:"Item 03"},
                              {ID:4, LABEL:"Item 04"},{ID:5, LABEL:"Item 05"}]);
                          
                          private var _ownerData:Object;
                          
                          private function init():void
                          {
                              //init code
                          }
                          
                          override public function set data(value:Object):void
                          {
                              if (value){
                                  _ownerData = value as Object;
                                  
                                  var col:DataGridListData = DataGridListData(listData);
                                  var item:Object = new Object;
                                  var clabel:String = value[col.dataField];
                                  var cid:int = value["ITEM_ID"];
                                  
                                  item.LABEL = clabel;
                                  item.ID = cid;
                                  
                                  selectedItem = item;
                              }
                          }
                          override public function get data():Object
                          {
                              return _ownerData;
                          }
                          
                          override public function setFocus():void
                          {
                              super.setFocus();
                              open();
                          }
                          
                          private function onSelectionChange(e:ListEvent):void
                          {
                              if(selectedItem && _ownerData){
                                  var col:DataGridListData = DataGridListData(listData);
                                  var clabel:String = selectedItem.LABEL;
                                  var cid:int = selectedItem.ID;
                                  
                                  _ownerData[col.dataField] = clabel;
                                  _ownerData["ITEM_ID"] = cid;
                              }
                          }
                      ]]>
                  </mx:Script>
              </mx:ComboBox>
              
              
              • 4. Re: item renderer issue
                Matt Le Fevre Level 4

                as i thought, can be resolved by messing around with the components selectedIndex

                 

                small alteration to make (in bold), try this for the itemEditor

                 

                <?xml version="1.0" encoding="utf-8"?>
                <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
                             labelField="LABEL" dataProvider="{acCombo}" rowCount="20"
                             change="onSelectionChange(event)" creationComplete="init(); this.selectedIndex = 0;">
                  

                <mx:Script>
                        <![CDATA[
                            import mx.events.ListEvent;
                            import mx.controls.dataGridClasses.DataGridListData;
                            import mx.rpc.events.ResultEvent;
                            import mx.collections.ArrayCollection;
                           
                            [Bindable]private var acCombo:ArrayCollection = new ArrayCollection ([{ID:1, LABEL:"Item 01"},{ID:2, LABEL:"Item 02"},{ID:3, LABEL:"Item 03"},
                                {ID:4, LABEL:"Item 04"},{ID:5, LABEL:"Item 05"}]);
                           
                            private var _ownerData:Object;
                           
                            private function init():void
                            {
                                //init code
                            }
                           
                            override public function set data(value:Object):void
                            {
                                if (value){
                                    _ownerData = value as Object;
                                   
                                    var col:DataGridListData = DataGridListData(listData);
                                    var item:Object = new Object;
                                    var clabel:String = value[col.dataField];
                                    var cid:int = value["ITEM_ID"];
                                   
                                    item.LABEL = clabel;
                                    item.ID = cid;
                                   
                                    selectedItem = item;
                                }
                            }
                            override public function get data():Object
                            {
                                return _ownerData;
                            }
                           
                            override public function setFocus():void
                            {
                                super.setFocus();
                                open();
                            }
                           
                            private function onSelectionChange(e:ListEvent):void
                            {
                                if(selectedItem && _ownerData){
                                    var col:DataGridListData = DataGridListData(listData);
                                    var clabel:String = selectedItem.LABEL;
                                    var cid:int = selectedItem.ID;
                                   
                                    _ownerData[col.dataField] = clabel;
                                    _ownerData["ITEM_ID"] = cid;
                                }
                            }
                        ]]>
                    </mx:Script>
                </mx:ComboBox>

                 

                 

                that will remove the blank value, however i imagine a bug will remain where eg:

                 

                you have Item 03 as the value, you go to edit it, it'll immediately switch to Item 01.

                 

                to fix this you'll need to create a small function determine which one was previously stored as the value and then alter the selectedIndex depending on that.

                 

                 

                something like

                 

                switch(storedValue)

                {

                case("Item 01")

                     this.selectedIndex = 0;

                     break;

                case("Item 02")

                     this.selectedIndex = 1;

                 

                etc.....

                1 person found this helpful
                • 5. Re: item renderer issue
                  jfb00 Level 3

                  Got the idea, thanks for your reply and help!

                  I have many items in my comboBox. Here is the solution:

                   

                             
                              override public function setFocus():void
                              {
                                  selectItemFromCombo(_ownerData["ITEM_ID"]);
                                  super.setFocus();
                                  open();
                              }
                              
                             .......
                              
                              public function selectItemFromCombo(ID:Number):void{
                                  var arrayIndex:Number = acCombo.length;
                                  for(var i:Number=0; i< arrayIndex; i++) {
                                      if(ID == acCombo[i].ID){
                                          this.selectedIndex = i;
                                          break;
                                      }else{
                                          this.selectedIndex = 0;
                                      }
                                  }
                              }
                  

                   

                  Johnny

                  • 6. Re: item renderer issue
                    jfb00 Level 3

                    This is close.