Dynamic itemRenderer using a ComboBox

Someone on flexcoders asked how you would create an itemRenderer which sometimes displayed a ComboBox while not displaying it other times. I decided to try and create this itemRenderer. Since the visibility of this ComboBox would be determined by the data, I created a custom itemRenderer that changes the visibility of a ComboBox and a Label in the set data function.

Here is the Demo and Code –

Demo: dynamicItemRendererExample.swf

Sample Code: dynamicItemRendererExample.mxml , DynRenderer.mxml

I did not choose to use an editable DataGridColumn because in this example, changing one of the ComboBoxes in the “Available Colors” column doesn’t actually change the data for the ‘colors’ property of the dataProvider which is the dataField for this column. Therefore, the default editable DataGrid code doesn’t work since that code expects that if I edit a cell in the “Available Colors” column, I am wanting to change the ‘colors’ property in some way. Instead, I am handling all changes to data in my itemRenderer. I am updating my DataGrid’s dataProvider on the change event of the ComboBox.

Note, that this is the way that I solved this problem. This doesn’t necessarily reflect best practice or anything. I’m not 100% sure what best practice for this scenario is. I’m just providing one solution. Thanks!

29 responses

  1. Thanks for that, but I would have been understood it even easily if there were some comments in the DynRenderer.mxml. This example really solved my problem

  2. […] Here  is a nice tutorial from a good and new “tech” blog. This article is about itemRenderer in a Flex dataGrid. Source are available. […]

  3. I had some complex itemRenderers and itemEditors …
    Modifying the underlying DataGrid.dataProvider (ArrayCollection) wasnt automatically invoking the setData …

    DataGrid.dataProvider.refresh() ..works okay for a while then DATAgrid goes into a vegetative state after a couple of clicks.

    Thanks for this posting.
    I think DataGrid.dataProvider.itemUpdated is the ONLY proper solution to update both the ItemRenderer sitting on top of datgrid and underlying DataGrid.datProvider. (unless u can manage to get a handle to the ItemRenderer/ItemEditor which is Not recommended)

  4. Thanks Joan. Great of you to share your knowledge. Exactly the solution I needed.

  5. Perfect, this is exactly what I needed, and I think your solution was elegant enough, if you don’t have the column it still adds the proper data to the dataprovider. 🙂

  6. I think your host provider is down. Anytime I try to view the source the connection times out to /butterfliesandbugs.bravehost.com/dynamicItemRendererExample.mxml.

  7. It should be up now, please try again. Thanks.

  8. Thank you (jlafferty). This really helped me.

  9. Hi I want to know one thing that I don’t figure out. I added a button and in the click event write the tarce(dg.selectedItem.color);

    I get all color what ever in the combo box how to get only the selected item.

    please let me know.

  10. I have an custom itemrenderer which i also use as an editor. I use states to transition from label to the custom component i.e. a textfield and an image button which opens up a popup. It works fine but when I edit the cell data my dataprovider doesnt refresh the custom components data.

  11. “Thanks Joan. Great of you to share your knowledge. Exactly the solution I needed.” nothing more

  12. Yeah, ok so I’m WAY behind on this conversation, but it’s close to what I need…just not quite.

    I’m doing something similar, rendering a different item depending on the data; however, in my case, the ComboBox I’m rendering is a custom component that has some built in pre-population behavior and change event handling. I’ve got it rendering ok, but the trick is, I can’t seem to figure out how to listen for the change event on the custom component from inside the custom renderer. I.E. when the combobox (custom component) is rendered, I can’t see to detect any changes a user might make.

    Thoughts?

  13. Nevermind…I got it. Trick was adding custom event metadata to the component and then dispatching that event as part of the component’s own “change” event handler. Then my renderer just has to listen for that custom event.

  14. Its really nice exmaple. its very helpfull for me.
    Thanx.

  15. May I suggest enabling the srcview attribute in your application tag in order to allow the right click > view source. It would be a lot cleaner and easier then the source you display. Otherwise, good example.

    http://livedocs.adobe.com/flex/3/html/help.html?content=build_7.html

  16. Urgent requirment for FlexDeveloper with 2+ year Exp.
    send resume(bendre.pravin@gmail.com)

  17. instead of the text is dynamically changing based on what is selected from the combobox, how about it will dynamically renders control to that column. Like when you select an item “Button” from the combobox, the column of that row will render a button. Is this possible? Any idea how to do that? This will be my post christmas present ^_^

  18. Finally, a ComboBox DataGrid example that works. Thanks!

  19. Try this:

    On your Data Grid, make the rowCount = “3”. Then scroll back and forth a few times… Notice how the combo boxes are no longer displaying the correct data anymore?

    How would you fix that? I know it’s because item-renderers are re-used as you scroll, but I can’t find any info on how to make that not happen.

    Thanks for any help you can give.

  20. @ LMacNeill
    Try using the override function, one as below:
    public override function set data(value:Object):void
    {
    super.data = value;
    localdata = this.data as Employee;
    }
    This should solve ur problem.

  21. This example really solved my problem. I have been trying to bind a collection to a datagrid and one of the column will have ComboBox with unique set ot data for each row. By seeing the line

    I fixed my problem with dataprovider=”{data.}”

    Thanks for u r blog

  22. Is it work if datagrid column editable?

    1. If your DataGrid is editable, you will need to modify the code for that column to have rendererIsEditor=”true” assuming you want the ComboBox to also be the editor. I think that should work.

  23. I dont understand how the renedere is defined as mxml. Shouldnt it be a .as extension.

    Should there be also a package associated with this renderer when importing.

    Are there any good books to learn this.

    this seems by far the hardest pice of technology i had to lern.

    And i dont think on the access to back end the dam front end is killing me can anyone help me.

  24. Hi

    This example is awesome. I have one question on the implementation on a specific scenario which is an extension of this example:

    1) The data provider that I use changes dynamically from server. Say I had a column called Selected Numbers (instead of selected colors) with drop down values as 1,2,3. The last column is selected number (instead of selected color).

    2) When the new arraycollection comes from the server side I need to change the color to say green of the selected number cell if the current value is greater than previous value. VIz a Viz change the color to red if the current value is lesser than previous value.

    Can you help me get some direction on how to go about solving this problem?

  25. How to display a datagrid inside a DrpdownList / Combo Box in Flex 3 ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: