14 Replies Latest reply on Jan 13, 2011 9:52 AM by Justin Daily

    ComboBox itemEditor in DataGrid doesn't receive focus

    Justin Daily Level 1

      I have created an mx:Datagrid for my application and have set all the columns to editable, as well as the main datagrid.  One of the columns is using an itemEditor which is an s:ComboBox.  Here is the code for that column:

       

      <mx:DataGridColumn id="substrateTypeCode" headerText="Substrate Type" dataField="substrateTypeCode" editorDataField="substrateType" editable="true">
           <mx:itemEditor>
                <fx:Component>
                     <s:MXDataGridItemRenderer>
                          <fx:Script>
                          <![CDATA[
                          public function get substrateType():String {
                               return subCB.selectedItem.substrateType;
                          }
                          ]]>
                          </fx:Script>
                          <s:ComboBox id="subCB" labelField="substrateType" enabled="true" dataProvider="{outerDocument.substratetypelist}" width="100%"/>
                     </s:MXDataGridItemRenderer>     
                </fx:Component>
           </mx:itemEditor>
      </mx:DataGridColumn>
      

       

      The rest of the columns have TextInput itemEditors, just the defaults.  I can tab between the rest of the columns just fine, but when I tab to the s:ComboBox column, the combo box does not receive focus.  I think it is tabbing to the column okay, because if I hit tab again it goes on to the next column as expected.  I am trying to make it so that the users can do data entry without having to use the mouse, ideally where they could either type the name of the option they want, or at least use the down arrow on the keyboard to select which option they want.  Right now, neither of these work.  The only way to select something from the combobox at this point is to use a mouse.

       

      The other question, which may or may not be related, is that if I use the mouse to select an option, and then later I shift-tab over the combo box again, the value that I chose earlier is wiped out.  Shift-tabbing or tabbing over the TextInputs doesn't erase them, but the comboBox gets erased for some reason.  I don't know if that's related to the other problem, but if someone has any ideas, that would be helpful.  Thanks!

        • 1. Re: ComboBox itemEditor in DataGrid doesn't receive focus
          Gaurav J Adobe Employee

          I think you may also need to set rendererIsEditable to true.

           

          Thanks,

          Gaurav Jain

          Flex SDK Team

          http://www.gauravj.com/blog

          • 2. Re: ComboBox itemEditor in DataGrid doesn't receive focus
            Justin Daily Level 1

            I assume you mean "rendererIsEditor".  For some reason, that didn't work as I expected it to, it just deleted the itemEditor comboBox altogether, meaning the column couldn't be edited at all.  Regardless, the rendererIsEditor setting would make the comboBox visible all the time, which I also don't want.  I just want it to have focus when I tab into that column.  See the following for a simplified version of what I'm talking about:

             

            http://blog.flexmp.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/

             

            I tried using this example, but this is using an old version of Flex and it was throwing errors when I tried to integrate it into my Flex 4 app.

            • 3. Re: ComboBox itemEditor in DataGrid doesn't receive focus
              Gaurav J Adobe Employee

              I think the errors you got when you used the example with flex 4 were because the document namespace was set to "http://ns.adobe.com/mxml/2009" ? If yes, then elements like mx:String, mx:Component should be prefixed with fx: instead of mx:

               

              -Gaurav

              1 person found this helpful
              • 4. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                Justin Daily Level 1

                Okay, so I've changed the itemEditor to look like this:

                 

                <mx:DataGridColumn id="substrateTypeCode" headerText="Substrate Type" dataField="substrateTypeCode" editorDataField="value" editable="true">
                     <mx:itemEditor>
                          <fx:Component>
                               <mx:ComboBox editable="false" dataProvider="{outerDocument.substratetypelist}" labelField="substrateType"/>
                          </fx:Component>                              
                     </mx:itemEditor>
                </mx:DataGridColumn>
                

                 

                This is what the tutorial I previously linked suggests, except I'm using a dataProvider instead of the inline one they used.  Now I can focus on the comboBox when I tab into it, but the data isn't saved in the cell when I move to a different cell.  If I set the ComboBox's editable property to "true" it does save the value in the box when I leave the cell, but it doesn't stay there when I return to the cell.  However, the ComboBox needs to be editable="false" because I don't want the user to choose any option except the ones that are given them.  What am I missing here?

                • 5. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                  Flex harUI Adobe Employee

                  You might need to implement a custom editorDataField on your editor.  The

                  value property may not be returning what you want.

                  • 6. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                    Justin Daily Level 1

                    I thought that's what the first version of my itemEditor was doing?  How do I get it to pass back the right value to the datagrid but still be able to receive focus?

                    • 7. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                      Flex harUI Adobe Employee

                      It depends on how you want to build it.  I believe the problem with the

                      original code may be that the editor has to

                      implements="mx.managers.IFocusManagerComponent".  If you want to switch to

                      using a plain ComboBox though, I think all you need is to copy the custom

                      editorDataField from the original code.  If you still have problems, it

                      might be that there is a type mismatch between the value of the

                      editorDataField and the type of the field in the dataprovider items.

                      • 8. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                        Justin Daily Level 1

                        Okay, I've tried the following, and it's able to (A) get focus so that users can manipulate the ComboBox with the keyboard and (B) retain that value (seemingly) when the ComboBox is focused out of. 

                         

                        <mx:DataGridColumn id="substrateTypeCode" headerText="Substrate Type" dataField="substrateTypeCode" editorDataField="substrateType" editable="true">
                             <mx:itemEditor>
                                  <fx:Component>
                                       <mx:ComboBox editable="false" dataProvider="{outerDocument.substratetypelist}" labelField="substrateType" width="100%">
                                            <fx:Script>
                                                 <![CDATA[
                                                      public function get substrateType():String {
                                                           if(this.selectedItem.substrateType !== null){
                                                                return this.selectedItem.substrateType;
                                                           } else {
                                                                return "";
                                                           }
                                                      }
                                                 ]]>
                                            </fx:Script>
                                       </mx:ComboBox>
                                  </fx:Component>                              
                             </mx:itemEditor>
                        </mx:DataGridColumn>
                        

                         

                        However, I'm still not able to go back to the ComboBox (or tab over it to another column) and have it retain the value I selected.  I know that there's a value in the grid because A) I can see the value in the grid when the itemEditor goes away, and B) I have set up a trace() in my main application MXML that traces the correct value.  I don't know if this means that the data is actually getting to the dataProvider or not.  So why does the value reset every time I tab over the ComboBox?

                        • 9. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                          Flex harUI Adobe Employee

                          IIRC, ComboBox editors take the data[dataField] and try to find it in the

                          dataProvider.  So if the substrateTypeCode of the data item is not == to an

                          item in the substratetypelist, then the editor may not start out with the

                          correct value.  Note that it is an equality test, not a comparison of

                          properties.

                          1 person found this helpful
                          • 10. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                            Justin Daily Level 1

                            Okay, I feel like I'm almost there.  Here is my current DataGridColumn:

                             

                            <mx:DataGridColumn id="substrateTypeCode" headerText="Substrate Type" dataField="substrateTypeCode" editorDataField="selectedItem" editable="true">
                                 <mx:itemEditor>
                                      <fx:Component>
                                           <mx:ComboBox editable="false" dataProvider="{outerDocument.substratetypelist}" labelField="substrateType" width="100%"/>
                                      </fx:Component>                              
                                 </mx:itemEditor>
                            </mx:DataGridColumn>
                            

                             

                            If I do it this way, rather than showing the name of the selected item when I tab out, it just prints [object Object].  The good news is that when I tab over it repeatedly it maintains the value that I've selected.  So I just need either an itemRenderer or a labelFunction correct?  I tried using a labelFunction and I couldn't figure out how to access the value that I wanted.  I assume that if I did private function theLabelFunction(item:Object, column:DataGridColumn) etc. that the "item" parameter refers to the dataProvider of the entire grid, not of the column that it's on, right?

                             

                            And with an itemRenderer, I'd have to have it reference the itemEditor in some way, correct?  I apologize if I'm not sure what I'm doing, but I've been learning Flex for about a month now and it's not quite intuitive yet.

                            • 11. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                              Flex harUI Adobe Employee

                              I'm not sure DG editors are intuitive to anybody.

                               

                              Now that editorDataField is set to selectedItem, the entire item from the

                              substratetypelist will be assigned to the substrateTypeCode in the DG's

                              dataProvider item.  If that item doesn't have a substrateTypeCode property,

                              then will be displayed.

                               

                              I think you may want a custom editorDataField that matches the type of the

                              substrateTypeCode in the DG dataProvider item.

                              • 12. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                                Justin Daily Level 1

                                So far, all I've been able to do is either A) use a custom editorDataField to return the value but then lose it again on combobox re-focus, or B) set editorDataField to "selectedItem" and keep my item selected on re-focus, but not be able to see anything other than [object Object] when I tab out.  I'm really stuck here.  My option A looks like the second code snippet that I posted, is there something I'm not setting up correctly within that one?  I have a public function get substrateType, do I need a setter for this value as well?

                                 

                                Option A code:

                                <mx:DataGridColumn id="substrateTypeCode" headerText="Substrate Type" dataField="substrateTypeCode" editorDataField="subType" editable="true">
                                                         <mx:itemEditor>
                                                              <fx:Component>
                                                                        <mx:ComboBox editable="false" dataProvider="{outerDocument.substratetypelist}" labelField="substrateType" width="100%">
                                                                             <fx:Script>
                                                                                  <![CDATA[
                                                                                       public function get subType():String {
                                                                                            if(this.selectedIndex != -1) {
                                                                                                 return this.selectedItem.substrateType;
                                                                                            }
                                                                                            return "";
                                                                                       }
                                                                                  ]]>
                                                                             </fx:Script>
                                                                        </mx:ComboBox>
                                                              </fx:Component>                              
                                                         </mx:itemEditor>
                                                    </mx:DataGridColumn>
                                

                                 

                                 

                                 

                                Option B code:

                                <mx:DataGridColumn id="substrateType" headerText="Substrate Type" dataField="substrateTypeCode" editorDataField="selectedItem" editable="true">
                                                              <mx:itemEditor>
                                                                   <fx:Component>
                                                                        <mx:ComboBox editable="false" dataProvider="{outerDocument.substrateTypeList}" labelField="substrateType" width="100%"/>
                                                                   </fx:Component>                              
                                                              </mx:itemEditor>
                                                    </mx:DataGridColumn>
                                
                                • 13. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                                  Flex harUI Adobe Employee

                                  Post what a DataGrid dataProvider item looks like and what the ComboBox

                                  dataProvider item looks like.

                                  • 14. Re: ComboBox itemEditor in DataGrid doesn't receive focus
                                    Justin Daily Level 1

                                    The dataProviders for both the datagrid and the combobox are both ArrayCollections pulled from (and the datagrid is later submitted back to) a database.

                                     

                                    The combobox dataProvider has 15 or so items, and each item has the properties "substrateType" and "substrateTypeCode".  "substrateType" is a string like "Mud/Clay", "Barnacle", or "Silt" and the "substrateTypeCode" is an integer from 0 to (array length -1).

                                     

                                    substratetypelist (ArrayCollection)

                                              item (object)

                                                        substrateType (string)

                                                        substrateTypeCode (int)

                                     

                                    The DG dataprovider is another array collection, and each item in the array collection has the following properties:

                                    -observation number (int)

                                    -recorder initials (string)

                                    -estimator initials (string)

                                    -depth (int)

                                    -substrateTypeCode (from comboBox *)

                                    -percentVegetation (int)

                                    -vegetationTypeCode (from another comboBox whose dataprovider is similar to substrateTypeCode)

                                    -numberOfEggs (int)

                                    -comments (string)

                                     

                                    Ideally, I'd like to have both the substrateType comboBox and the cell in which it resides when not active display the substrateType String, but then pass the substrateTypeCode integer back as a value to the database, but I'd settle at this point for having to convert the string back to the code before database insertion.  I just need it to show the correct value when the combobox itemEditor loses focus, and then keep the same value if/when it regains focus (for example, if someone is trying to shift-tab to an earlier value to make a correction, shift-tabbing past the combobox).  I hope this is enough.