Using XML with DataGrid itemRenderers

For a recent project I needed a way to create a ComboBox in a DataGrid component that was populated by an XML file.   I found an older example by Brendan Meutzner that used an ArrayCollection.

This was a good starting point, so I modified and added to the file to create an example that uses a ComboBox, CheckBox, and NumericStepper within the DataGrid and populated by an external XML file.  The real trick is getting the XML file to be updated when changes to the itemRenderer occurred.

This is where Brendan’s example helped the most.  Using the editorDataField and renderIsEditor properties of the DataGridColumn, the changes to the itemRenderer were able to update the dataField and the XML file itself.  

Another trick I found interesting was making the the value or selected values of the NumericStepper and CheckBox components Bindable within the itemRenderer code.   You can review the complete file and source code below.

Sample and Source Code

-Mister

31 Comments

  1. Cool. I did find one odd problem.. if there are lots of choices for the combo box (more than rowCount), then 1 in (rowCount) of the entries don’t render – so they look blank, even though they work (choose the correct value).

    Any ideas?

  2. … clarification of previous post… that only seems to happen if the first entry in the combobox is blank (“”)

  3. I guess I am not sure what you mean by your question, do you have an example? The example here has 3 rows populating the comobobox and three rows populating the datagrid, but they are not related. The comobobox receives data from the external XML, so I could add as many as I like. Please provide an example and I can see what you are saying.

    Thanks

    – mr

  4. Ah, you mean that the XML has a null node? Like:
    [as]

    2
    Comeptency 2

    3
    Comeptency 3

    [/as]

    Where the first children of the comptency item are left null nodes in the xml?

  5. I’m trying to find an example for placing a combobox in a datagrid column. It looks like this example would show me what I need to know. Could you make the code available to view?

  6. Have you tried the link that says Source Code in the post? Do you know how to get the source code from Flex, you just right-click and select View Source from the Flex demo file.

    – mr

  7. I hope to be able to use this for comboboxes in my datagrid.
    I tried but I get this error…
    1172: Definition ComboRenderer could not be found.
    Is this a custom definition?
    Could you point me in the right direction to get comboboxes in the grid?

  8. The ComboRender is the ItemRenderer used in the DataGrid component of the Main.mxml application:

    [as][/as]

    Be sure you have the comborenderer.mxml file in the same folder as the main.mxml file. When you view the source code on the example (right-click –> view source) then you can see the entire structure of the application.

  9. Very helpful example. Thanks! And a small contribution… to delete, use the delete keyword.
    delete
    decisionXML.decisionPart.assessmentSection.assessmentItem[this.decisionDataGrid.selectedIndex];

  10. I implement the example but I have an issue ..
    the http service that I call retrives values from a php file (it works!!) but in the result handler() when the setselectedItem(null) ; senctence happens throws an rumtime error :
    if comment the line it works but it dosn’t update the combo data with the dataprovider of the datagrid.WHAT I CAN DO ?? THNX

    (the error)
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at renderer::projectRender/::setSelectedItem()
    at renderer::projectRender/::resultHandler()
    at renderer::projectRender/__hs_getUserPro_result()

  11. Sounds like you are passing a null value to the function call, which means the error is valid. Check the data coming back by tracing out each value. You could also place a try..catch statement around the function call or validate that the value is not null before you call it.

  12. appendChild is an XML function built into Flex, look up the Flex Help documents for appendChild. The function addNewItem is a function. assetssmentSection is within the XML itself, take a look at the manifest.xml document and you can see the XML node there.

  13. It seems that the example the dataprovider is only updated correctly as long as you use the mouse.

    Ex. if you tab into a column an uses the keyboard to update the column and tab out of it, the dataprovider isn’t updated. Like if you presses space in the column using a checkb.ox as renderer and editor.

  14. Hi very good example. I have tried your example it works fine but when i take this example to my flex application(flex 3) there is a problem with coming data from combobox they are all set to same one(first field of the combobox).
    I have created my application via database application wizard in flex 3 and my product table has some foreign keys such as type_id and i want to render this type_id value with a combobox(that combobox gets the labels from types.xml). I understand the concepts of the flex but it doesn’t work may be i am missing sth while editing your code. Could you give a small example with a database(php-mysql) when i change the combobox value it updates the database. Thank you.

  15. Thanks Mister for sharing this. I found a problem with the combobox renderer. When I added one item with the default value of 1. Then I clicked the button of the combobox and didn’t select anything, the value should remain unchanged, but it changes to null.

    Any idea about this?

  16. Another problem I found. I first added some item and changed the competency to 2. Then I reload it and add the same amount of new items with the default value of 1. Then I click the combobox and didn’t change anything. When i left it. It becomes 2.

  17. the delete button doesn’t seem to work. It seems you have a removeChildAt call which I can’t find in the XML class docs, but it there is a removeItemAt in XMLLIstCOllection … any ideas?

  18. Well, since the code has not changed and the data has not changed, the remaining factor seems to be the Flash player version change. I am using 9.0.115, and it has stopped working for me as well. What version of the Flash player are you using?

  19. Mister

    Thanks for the wonderful example.

    I am not too sure how to implement the following scenario using the rendered here.

    1) I have a httpservice returning an xml that looks like this

    1
    Science

    2
    Mathematics

    This is the data for the itemrenderer combo box. I want it to display the name, but as the value back to the datagrid, send the “id”.

    Also in the datagrid, I would like to display the name instead of id.

    Any inputs, appreciated.

    Thanks

    Jim

  20. hi,
    i’m using item renderer in my app… even i get the same error saying definition Flags could not be found… Flags is the .mxml file i created which has the renderer… and it is in the same folder as my main file

  21. I don’t get an error, the only thing not working is the delete function. Can you be sure you have version 9 of the Flash player. I can’t imagine what else could be the issue.

  22. Hi Mister,

    Thanks for the tutorial !!

    I am stuck with one problem for sometime now, and was hoping if you could help me out.

    Similar to your example, I am trying to populate a data grid using xml. However, I also want the combobox to be updated dynamically.

    I am using flex 3.3 mx.controls.datagrid component.

    Here is the code snippet for what I am trying to do:

    [as]
    var propertyColumn:DataGridColumn = new DataGridColumn(“Name”);
    propertyColumn.editable = false;
    propertyColumn.width = 60;
    var valueColumn:DataGridColumn = new DataGridColumn(“Value”);
    valueColumn.editable = true;
    propertyColumn.width = 60;
    var unitColumn:DataGridColumn = new DataGridColumn(“Unit”);
    unitColumn.itemRenderer = new ClassFactory(Unit);
    [/as]
    Here Unit is an class which implements Combobox
    [as]
    public class Unit extends ComboBox
    {
    private var _displayList:ArrayCollection;

    public function Unit()
    {
    _displayList = new ArrayCollection();
    _displayList.addItem(“N/A”);

    this.selectedIndex = 0;
    this.dataProvider = _displayList;
    }

    public function setDisplayList(list:ArrayCollection):void
    {
    _displayList = list;
    this.dataProvider = _displayList;
    this.selectedIndex = 0;
    }
    }
    [/as]

    Then I create an array object which contains a list of values for this, and assign it to the dataprovider of the data grid. All the other values in the grid get displayed properly except for the combobox. The reason I checked was that it creates a new item for the unit when I assign my data to the dataprovider, and does not take my previous data.

    I understand that what is happening is correct (because I am doing new ClassFactory(Unit) while creating itemrenderer), but dont know what I need to do to pass the data I provided to the itemrenderer.

    Any help/feedback that you may give would be really really appreciated !!!

    Thanks in advance,
    Kapil

  23. Hi Mister,

    Thanks for the reply. I have already gone over the post. Also, as mentioned in that post, I am indeed passing an associative array to the dataprovider of the datagrid, and all the data does get updated nicely, except for the combobox 😦 😦

    The reason for above is that it does not set the data to the itemrenderer of combobox (inspite of me overriding the “set data” and “set dataProvider” functions).

    Thanks,
    Kapil

  24. Hi Mister,

    Thanks for the reply. I have already gone over the post. Also, as mentioned in that post, I am indeed passing an associative array to the dataprovider of the datagrid, and all the data does get updated nicely, except for the combobox 😦 😦

    The reason for above is that it does not set the data to the itemrenderer of combobox (inspite of me overriding the “set data” and “set dataProvider” functions).

    But how to set it, i do not understand 😦

    Thanks,
    Kapil

  25. Hi ,

    I am trying to use AutoComplete as itemEditor in an AdvancedDataGrid.It is not working properly.

    1.When there appears a scroll bar and I try to scroll down ,the typed text in the AutoComplete component disappears where in i want to retain it.

    2.When i change the typed text of autocomplete in one row ,the combo for other rows open one by one.

    Please help me with the solution.

    Thanks.

  26. HI
    I uanble to access the link in ur site it says 404 not found………………..

    Can u help with some code i need to develop a application in which based on t he xml i have change the item renderer in the data grid .’
    for example if the tag has a property itemrenderer saying drop down list i need to render the data grid with a drop down list and if there is a check box i have to renderer that in the data grid

    Pls help me

  27. Dear Mister,

    I am trying to see the sample but the linsk returns an 404 error. Could you post another URL if possible, or send me by email?

    Many thanks,

    Gines

  28. I don’t think I have the file any longer. If I can find it in old version of my blog, I will fix the link.

Comments are closed.