27 Replies Latest reply on Sep 22, 2010 8:26 AM by dhulipu

    ItemRenderer combobox and button inside datagrid

    duskandawn

      Hello All,

      I am trying to pass the selectedItem from the comboxbox to click event of a button. Both of these components are present inside a datagrid.

       

      A sample of case looks like :

       

      Main.mxml

      <mx:DataGrid id="dg1"  dataProvider="{initDG}" rowCount="4">
            <mx:columns>
            <mx:DataGridColumn  dataField="Artist"/>
           <mx:DataGridColumn dataField="Album" />

              <mx:DataGridColumn id="test" resizable="true" headerText="Account Options" 
                          itemRenderer="
      components.comboButton" />   
            <mx:DataGridColumn dataField="acctOption" headerText="Account Actions"
                      <mx:itemRenderer>
                          <mx:Component>
                              <mx:LinkButton label="Go" click="parentDocument.testing()"/>
                          </mx:Component>
                      </mx:itemRenderer>
                  </mx:DataGridColumn>
              </mx:columns>
        </mx:DataGrid>

       

      private var initDG:ArrayCollection = new ArrayCollection([ 
      {Artist:'Pavement', Album:'Slanted and Enchanted', 
      Price:11.99, State:"AL"}, 
      {Artist:'Pavement', Album:'Brighten the Corners', 
      Price:11.99, State:"AL"} 
      ]);

       

      And comboButton.mxml looks like :

      <mx:ComboBox id="comboBox">
              <mx:dataProvider>
                  <mx:Array>
                      <mx:Object label="one" />
                      <mx:Object label="two" />
                      <mx:Object label="three" />
                      <mx:Object label="four" />
                      <mx:Object label="five" />
                      <mx:Object label="six" />
                  </mx:Array>
              </mx:dataProvider>
          </mx:ComboBox>

       

      So how can i display the value of the selectedItem, when the user selectes of the values from comboxbox and clicks the "Go" button.

      I want to somehow show that value in my function called "testing()"

       

      Please advise.

       

      Thank you

        • 1. Re: ItemRenderer combobox and button inside datagrid
          oldMster Level 3

          You probably need to add 'rendererIsEditor="true"' to the 'test' datagrid column definition, and you may need to add the 'editorDataField="label"' as well.  I think the comboBox has a 'text' property, so the editorDataField may not be needed.

          • 2. Re: ItemRenderer combobox and button inside datagrid
            duskandawn Level 1

            Can you please elaborate on the advise.

            What value do i pass in the testing() function so that i can display the selectedvalue from the comboxbox.

             

            <mx:DataGridColumn id="test" resizable="true" headerText="Account Options" 
                                itemRenderer="components.comboButton" rendererIsEditor='true'/>  

             

             

                <mx:LinkButton label="Go" click="parentDocument.createLink(test.selectedlable)"/>

             

            this gives me Access of undefined property test.

            • 3. Re: ItemRenderer combobox and button inside datagrid
              oldMster Level 3

              Try this:

               

              1. Remove the dataGridcolumn with datafield="acctOption" in it.  This seems to be a duplicate you are replacing with the combobox column.

              2. in the id="test" column, add  datafield="acctOption" to the definition.

               

              3. change the LinkButton click property to click="parentDocument.createLink(data.acctOption);"

               

              'data' inside a datagrid (or other List component with a dataprovider) is current 'row' of data in the dataprovider.

              • 4. Re: ItemRenderer combobox and button inside datagrid
                oldMster Level 3

                A good discussion of using itemrenderers in List components is found here also:

                 

                http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html?devcon=f1

                • 5. Re: ItemRenderer combobox and button inside datagrid
                  duskandawn Level 1

                  When i have this :

                   

                  <mx:DataGridColumn id="test" dataField="acctOption" resizable="true" headerText="Account Options" 
                                      itemRenderer="components.comboButton" rendererIsEditor='true'/>   
                             
                              <mx:DataGridColumn  headerText="Account Actions" >
                                  <mx:itemRenderer>
                                      <mx:Component>
                                          <mx:LinkButton label="Go" click="parentDocument.createLink(data.acctOption)"/>
                                      </mx:Component>
                                  </mx:itemRenderer>
                              </mx:DataGridColumn>

                   

                   

                  components.comboButton.mxml

                   

                  <mx:ComboBox id="comboBox" change="testCombo()">
                          <mx:dataProvider>
                              <mx:Array>
                                  <mx:Object label="one" />
                                  <mx:Object label="two" />
                                  <mx:Object label="three" />
                                  <mx:Object label="four" />
                                  <mx:Object label="five" />
                                  <mx:Object label="six" />
                              </mx:Array>
                          </mx:dataProvider>
                      </mx:ComboBox>

                   

                   

                  With the above setup, when i click GO

                   

                  TypeError: Error #1009: Cannot access a property or method of a null object reference.
                      at sampledata/createLink()[C:\Flex_Workspace\Testing\src\sampledata.mxml:17]
                      at sampledata_inlineComponent1/___sampledata_inlineComponent1_LinkButton1_click()[C:\Flex_Wo rkspace\Testing\src\sampledata.mxml:32]

                   

                  Any ideas ?

                  • 6. Re: ItemRenderer combobox and button inside datagrid
                    oldMster Level 3

                    The way you have it, even if there is no data on the current 'row', the button is still enabled.  If there is no underlying dataprovider 'row', then the object 'data' would be null, so attempting to access data.acctOption when the button is clicked.  would return this error.  The easiest way to fix this is to pass the entire data object to the parentDocument.createLink function, and have it return immediately if data == null.  The best way to fix it would be to change the buttons enabled property based on the underlying (ie set enabled="false" if data == null), but I'm not sure of the way to do that.

                    • 7. Re: ItemRenderer combobox and button inside datagrid
                      duskandawn Level 1

                      yes i got your point, but my problem is how do i reflect the drop down selected data from the combobox to my click function of the button.


                      I am assuming the data will never be null, trying your option, i get the full array which is passed to combobox somethitng like this :

                       

                      <mx:DataGridColumn id="testcombo" dataField="acctOption" headerText="Account Options" width=".1">
                                      <mx:itemRenderer>
                                          <mx:Component >
                                              <mx:ComboBox dataProvider="{data.acctOption}"/>
                                          </mx:Component>
                                      </mx:itemRenderer>
                                  </mx:DataGridColumn>
                                 
                                  <mx:DataGridColumn headerText="Account Actions" width=".1">
                                      <mx:itemRenderer>
                                          <mx:Component>
                                              <mx:LinkButton label="Go" textRollOverColor="0x2B333C"  click="{parentDocument.createLink(data.acctOption)}"/>
                                          </mx:Component>
                                      </mx:itemRenderer>
                                  </mx:DataGridColumn>

                       

                      This gives me the whole array, but i want to get the selectedItem inside my createlink function from the comboxbox.

                       

                       

                      Its like suppose i have a combobox and button inside a datagrid,

                      with combobox i have values as yahoo, google, so when user select one of the values from combobox, and click Go on the same row in datagrid, i need to create a link and navigate to the user selected choice. that is why i need the selectItem from the combobox and pass it to the click of the button ?

                      • 8. Re: ItemRenderer combobox and button inside datagrid
                        oldMster Level 3

                        I think part of the problem is you have a dataprovider within a dataprovider. Try this;

                         

                        <mx:DataGridColumn id="testcombo" dataField="acctOption" headerText="Account Options" width=".1"  rendererIsEditor="true">
                                        <mx:itemRenderer>
                                            <mx:Component >
                                                <mx:ComboBox >

                                                      <mx:String>Value 1</String>

                                                      <mx:String>Value 2</String>

                                                 </mx:ComboBox>
                                            </mx:Component>
                                        </mx:itemRenderer>
                                    </mx:DataGridColumn>

                        • 9. Re: ItemRenderer combobox and button inside datagrid
                          Flex harUI Adobe Employee

                          Back to basics for a second:

                           

                          Fundamentally, a DataGrid is a view of data in the dataprovider.  It isn't a view organizer like an html table.  There is an expectation that every renderer instance is viewing some property of the item in the dataprovider that corresponds to its row number.

                           

                          By making the DataGrid editable=true and rendererIsEditor=true, you are signing up the ComboBox to update the property of the item, so hopefully the values that property in the item can have are the set of values in the ComboBox's dataProvider.

                           

                          If that's true, (and I recommend that you make it true if it isn't), then the "go" button should just identify which row has been changed.  If you have allowMultipleSelection=false, then in theory the selectedIndex should be set to the row when you handle the click.  If not, you can probably use callLater to wait.

                           

                          Then you should be able to use:

                           

                               dataGrid.selectedItem.Artist

                                

                          to get the value chosen from the ComboBox

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

                          Blog: http://blogs.adobe.com/aharui

                          • 10. Re: ItemRenderer combobox and button inside datagrid
                            duskandawn Level 1

                            Still no luck,

                            <mx:DataGridColumn id="testcombo" dataField="acctOption" headerText="Account Options" rendererIsEditor="true">
                                            <mx:itemRenderer>
                                                <mx:Component >
                                                    <mx:ComboBox>

                                                          <mx:String>Value 1</mx:String>
                                                          <mx:String>Value 2</mx:String>

                                                     </mx:ComboBox>
                                                </mx:Component>
                                            </mx:itemRenderer>
                                        </mx:DataGridColumn>
                                       
                                        <mx:DataGridColumn  headerText="Account Actions" >
                                            <mx:itemRenderer>
                                                <mx:Component>
                                                    <mx:LinkButton label="Go"
                                                        click="parentDocument.createLink(data.acctOption)"/>
                                                </mx:Component>
                                            </mx:itemRenderer>
                                        </mx:DataGridColumn>

                             

                            : Error #1009: Cannot access a property or method of a null object reference.
                                at sampledata/createLink()[C:\Flex_Workspace\Testing\src\sampledata.mxml:18]
                                at sampledata_inlineComponent2/___sampledata_inlineComponent2_LinkButton1_click()[C:\Flex_Wo rkspace\Testing\src\sampledata.mxml:44]

                             

                            I dont understand is this not a common use in case of datagrid with multiple value in combobox and reflecting them on the onclick event of the button.

                            Where am i going wrong with this approach ??

                             

                            Please advise

                            • 11. Re: ItemRenderer combobox and button inside datagrid
                              Flex harUI Adobe Employee

                              Please post the source for the createLink() method

                               

                              Alex Harui

                              Flex SDK Developer

                              Adobe Systems Inc.

                              Blog: http://blogs.adobe.com/aharui

                              • 12. Re: ItemRenderer combobox and button inside datagrid
                                duskandawn Level 1

                                Here is what my code looks like :

                                <mx:DataGrid editable="true" id="dg1"  dataProvider="{initDG}" rowCount="4">
                                      <mx:columns>
                                      <mx:DataGridColumn  dataField="Artist"/>
                                                <mx:DataGridColumn dataField="Album" />
                                                <mx:DataGridColumn dataField="Price" />
                                          <mx:DataGridColumn id="test" editable="true" resizable="true" headerText="Account Options" 
                                                    itemRenderer="components.comboButton" rendererIsEditor='true'/>   
                                           
                                            <mx:DataGridColumn  headerText="Account Actions" >
                                                <mx:itemRenderer>
                                                    <mx:Component>
                                                        <mx:LinkButton label="Go"
                                                            click="parentDocument.createLink()"/>
                                                    </mx:Component>
                                                </mx:itemRenderer>
                                            </mx:DataGridColumn>
                                                   
                                            </mx:columns>
                                        </mx:DataGrid>

                                 

                                public function createLink():void{
                                     Alert.show(dg1.selectedItem.???);
                                }

                                 

                                 

                                I still dont understand, what goes on the ???? .

                                 

                                And can you please suggest what will be the other solution if i have to do some many maniplulations and actions on the basis of the data which i recieve from a webservice.

                                I mean to say how do i go about displaying and organizing at same time. Am trying to convert and exisitng j2ee app to flex not sure then if this is the right approach ?

                                 

                                Thanks for your help

                                • 13. Re: ItemRenderer combobox and button inside datagrid
                                  Flex harUI Adobe Employee

                                  Like I said earlier, a renderer should be viewing some field in the data.  Your column definition for the ComboBox does not specify a dataField.  If you specified it as dataField="options" then the renderer/editor would write the ComboBox choice into the data item and you would see it using:

                                   

                                       Alert.show(dg1.selectedItem.options);

                                   

                                  Normally the data is pulled from a server and has a field in it like that, and the ComboBox reflects the allowed values for that field.

                                   

                                  Alex Harui

                                  Flex SDK Developer

                                  Adobe Systems Inc.

                                  Blog: http://blogs.adobe.com/aharui

                                  • 14. Re: ItemRenderer combobox and button inside datagrid
                                    duskandawn Level 1

                                    Sorry for this :

                                    But when i do this :

                                    <mx:DataGrid id="newDisplay" rowCount="5" dataProvider="{finalData}"
                                                 labelFunction="customDisplay"
                                                 editable="true" >

                                    <mx:DataGridColumn id="testcombo"
                                                    dataField="acctOption" rendererIsEditor="true"
                                                    headerText="Account Options" width=".1">
                                                    <mx:itemRenderer>
                                                        <mx:Component >
                                                            <mx:ComboBox dataProvider="{data.acctOption}"/>
                                                        </mx:Component>
                                                    </mx:itemRenderer>
                                                </mx:DataGridColumn>
                                               
                                                <mx:DataGridColumn headerText="Account Actions" width=".1">
                                                    <mx:itemRenderer>
                                                        <mx:Component>
                                                            <mx:LinkButton label="Go"  click="{parentDocument.createLink()}"/>
                                                        </mx:Component>
                                                    </mx:itemRenderer>
                                                </mx:DataGridColumn>

                                    </mx:DataGrid>

                                    public function createLink():void{
                                            Alert.show(newDisplay.selectedItem.acctOption);
                                         
                                        }

                                     

                                    Its giving me all the values under the selected combobox, and the Alert shows me : test1,test2,.... even when i just selected test1 from the dropdown.

                                    • 15. Re: ItemRenderer combobox and button inside datagrid
                                      Flex harUI Adobe Employee

                                      That's probably because acctOption is the array of options.  You were using a custom component with its array of options baked in.  That's the recommended pattern.  But the choice is placed in the some field in each data item and that's you probably want to display in the alert.

                                       

                                      Alex Harui

                                      Flex SDK Developer

                                      Adobe Systems Inc.

                                      Blog: http://blogs.adobe.com/aharui

                                      • 16. Re: ItemRenderer combobox and button inside datagrid
                                        duskandawn Level 1

                                        Yes, i think you summarized my problem correctly now.

                                        But again i am still stuck , is there no way i can display the selected item from drop down to my button click.

                                        I jave no idea, do i need to change my approach or its something i am missing in here to get the required functionality?

                                         

                                        Please help

                                        • 17. Re: ItemRenderer combobox and button inside datagrid
                                          oldMster Level 3

                                          duskanddawn,

                                           

                                          The problem is not that you are using the same property in your data provider for the list of options, and the 'selected option'.  This won't work, since the combobox ItemRenderer will be reused as the datagrid is scrolled, and there is no property in the dataprovider for it to store the 'selected option'.  If you are providing the list of options in 'acctOption', then you should also have a 'selectedAcctOption' (or any other unique name) in the data provider to hold the option that is selected in the combobox.  The datafield for the datagrid column would then be 'selectedAcctOption', not 'acctOption', and leave the data provider for the combobox as it is.  After the user has selected an item, it should be available when the button is pressed by referencing newDisplay.selectedItem.selectedAcctOption, ie Alert.show(newDisplay.selectedItem.selectedAcctOption)

                                          • 18. Re: ItemRenderer combobox and button inside datagrid
                                            oldMster Level 3

                                            Drat, first sentence should read 'The problem is now' instead of 'The problem is not'. Sorry for any confusion that created

                                            • 19. Re: ItemRenderer combobox and button inside datagrid
                                              duskandawn Level 1

                                              i followed your advise and added one more filed in my VO for selectedOptionValue

                                               

                                              <mx:DataGridColumn id="testcombo"
                                                              dataField="acctOptionValue" rendererIsEditor="true" editable="true"
                                                              headerText="Account Options" width=".1">
                                                              <mx:itemRenderer>
                                                                  <mx:Component >
                                                                      <mx:ComboBox dataProvider="{data.acctOption}"/>
                                                                  </mx:Component>
                                                              </mx:itemRenderer>
                                                          </mx:DataGridColumn>
                                                         
                                                          <mx:DataGridColumn headerText="Account Actions" width=".1">
                                                              <mx:itemRenderer>
                                                                  <mx:Component>
                                                                      <mx:LinkButton label="Go"  click="{parentDocument.createLink()}"/>
                                                                  </mx:Component>
                                                              </mx:itemRenderer>
                                                          </mx:DataGridColumn>

                                               

                                               

                                               

                                              Now when i click the GO button, i see the value being passed for the selected value,

                                              BUT for the row where i click this GO vanishes.

                                              I mean to say the whole row is removed from the datagrid after the button click, but when i refresh the page i see it again.

                                              • 20. Re: ItemRenderer combobox and button inside datagrid
                                                Flex harUI Adobe Employee

                                                Is your VO ?  Do you have valid initial values (one of the choices from the acctOptions array) for the acctOptionValue field in the VOs?  Are the comboboxes properly showing those values?

                                                 

                                                Alex Harui

                                                Flex SDK Developer

                                                Adobe Systems Inc.

                                                Blog: http://blogs.adobe.com/aharui

                                                • 21. Re: ItemRenderer combobox and button inside datagrid
                                                  duskandawn Level 1

                                                  The answer to all your questions is YES.

                                                  The wiered thing is as soon as i select a value from my dropdown, and click

                                                  anywhere else in the datagrid the whole row disappears where i made the change so its just not the

                                                  GO button click.

                                                  And also now all my fields in datagrid are editable i dont what the other fields to be editable, was looking for a

                                                  simple combobox dropdown and button to it values. Didnt it will be so difficult to get this working, still which i am

                                                  no where close to

                                                  Please help, or suggest some other apporach if i am going the wrong way ??

                                                  • 22. Re: ItemRenderer combobox and button inside datagrid
                                                    Flex harUI Adobe Employee

                                                    Here is the canonical example that works for me.

                                                     

                                                    <?xml version="1.0" encoding="utf-8"?>

                                                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()" >

                                                     

                                                         <mx:Script>

                                                              <![CDATA[

                                                                   import mx.collections.ArrayCollection;

                                                                    

                                                                   

                                                                   private var arr:Array;

                                                                    

                                                                   private function init():void

                                                                {

                                                                    arr = new Array();

                                                                    arr.push( { first: "Alex", last: "Harui", status: "Open" } );

                                                                    arr.push( );

                                                                    arr.push( );

                                                                }

                                                     

                                                                public function createLink():void

                                                                {

                                                                    output.text = dataGrid.selectedItem.first + " " + dataGrid.selectedItem.status;

                                                                }

                                                                    

                                                              ]]>

                                                         </mx:Script>

                                                          

                                                         <mx:DataGrid id="dataGrid" dataProvider="" editable="true">

                                                              <mx:columns>

                                                                   <mx:DataGridColumn dataField="first" headerText="First Name" />

                                                                   <mx:DataGridColumn dataField="last" headerText="Last Name" />

                                                                <mx:DataGridColumn

                                                                    dataField="status" rendererIsEditor="true" editable="true"

                                                                    headerText="Status" >

                                                                    <mx:itemRenderer>

                                                                        <mx:Component >

                                                                            <mx:ComboBox dataProvider="[ 'Open', 'Closed', 'Pending']"/>

                                                                        </mx:Component>

                                                                    </mx:itemRenderer>

                                                                </mx:DataGridColumn>

                                                                 

                                                                <mx:DataGridColumn headerText="Actions" editable="false">

                                                                    <mx:itemRenderer>

                                                                        <mx:Component>

                                                                            <mx:LinkButton label="Go"  click="{parentDocument.createLink()}"/>

                                                                        </mx:Component>

                                                                    </mx:itemRenderer>

                                                                </mx:DataGridColumn>

                                                              </mx:columns>

                                                         </mx:DataGrid>

                                                        <mx:HBox>

                                                        <mx:Label text="Last thing you clicked on:" />

                                                        <mx:Label id="output" />

                                                        </mx:HBox>

                                                    </mx:Application>

                                                     

                                                    Alex Harui

                                                    Flex SDK Developer

                                                    Adobe Systems Inc.

                                                    Blog: http://blogs.adobe.com/aharui

                                                    • 23. Re: ItemRenderer combobox and button inside datagrid
                                                      duskandawn Level 1

                                                      yes finally got it working, with some tweaks in my VO structure.

                                                      But one final question is there no way i can disable the other fileds to be no editable, it looks wiered when the user clicks on any other field and it shows

                                                      up a empty text box to edit the field.

                                                      Do i need to use something else to get this functionality and GUI to get desired result ??

                                                      • 24. Re: ItemRenderer combobox and button inside datagrid
                                                        Michael Borbor Level 4

                                                        Yes you can use the itemEditBegin event, using this event you can prevent the edition if you want.

                                                        • 25. Re: ItemRenderer combobox and button inside datagrid
                                                          Flex harUI Adobe Employee

                                                          Set editable=false on each DataGridColumn that you don't want an editor to appear

                                                           

                                                          Alex Harui

                                                          Flex SDK Developer

                                                          Adobe Systems Inc.

                                                          Blog: http://blogs.adobe.com/aharui

                                                          • 26. Re: ItemRenderer combobox and button inside datagrid
                                                            duskandawn Level 1

                                                            Works perfectly now. Thanks so much everyone for all your help.

                                                            • 27. Re: ItemRenderer combobox and button inside datagrid
                                                              dhulipu

                                                              Hi,

                                                              Can you please post the code here,

                                                              I am facting same problem in updating combobox selected item.

                                                              Here In my scenario, I create DatagridColumn dynamically and both button,comboboxes are itemrenderers. the data in Combobox will populate from

                                                              webservice call.

                                                              Now I want to select Combobox value by clicking on teh button in next column, on click of the button, i am getting value, which is available on  combobox,

                                                              here my problem is how to refresh combox or make the selected index of the button click by passing a value

                                                               

                                                              Thanks & Regards

                                                              Dhulipudi