Nested Inline ItemRenderers – A List in a DataGrid

This is just a fun example of using drop-in inline itemRenderers. Inline itemRenderers are when you use the <mx:Component> tag to define an itemRenderer within your mxml. In this example, I am using a DataGrid with two columns. The second column uses a List itemRenderer. The List uses an Image itemRenderer. Here’s a screenshot:

Demo: datagrid_cellrenderer_nested.swf
Code Sample: datagrid_cellrenderer_nested.mxml

In this example, the DataGrid is populated by an Array with objects that looks like this: { price: “under $50”, items: under50}. The value of the ‘items’ property is actually an array that is the dataProvider to the List. (You can also have the dataProvider to the List be a different filtered view collection of the DataGrid’s original dataProvider, but, I didn’t take the time to do that.)

Also, we did not specify the source of the Image itemRenderer. Because the ‘source’ property is the default property of an Image, the source is populated by default from the List’s dataProvider.

Good luck! There is so much we can do with itemRenderers.

7 responses

  1. Thanks for this information. How does one go about selectively displaying the list. For e.g do not display the list until one clicks the row. (And collapse the previously expanded list if user clicks on another row).
    Thanks for your response.
    -jlogan

  2. In the custom itemRenderer, I would probably use States. One state would be displaying the List while the other state is hiding it. You would change the state of the newly selected row and the previously selected row when the DataGrid’s change event is triggered.

  3. How do you change the state of a cell?

  4. Hi, Im doing something like this for a project. I am trying to display the information in timetable format, reading from a database. is there a way to do it?

  5. Great Article Man.
    But there is a problem here. I had been checked your sample in Flex 3.2 and everything was good, but when I use something like that in Flash Builder 4 beta 2, I got some error like this:
    #1010: A term is undefined and has no properties.

    Do u have an idea?!

  6. getting error:
    TypeError: Error #1010: A term is undefined and has no properties.
    at mx.controls.listClasses::ListBase/setSelectionDataLoop()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:6473]
    at mx.controls.listClasses::ListBase/commitSelectedItems()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:6364]
    at mx.controls.listClasses::ListBase/commitSelectedItem()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:6329]
    at mx.controls.listClasses::ListBase/adjustSelectionSettings()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:4014]
    at mx.controls.listClasses::ListBase/updateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3748]
    at mx.controls::List/updateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\List.as:1005]
    at mx.controls.listClasses::ListBase/validateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3348]
    at mx.managers::LayoutManager/validateClient()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\LayoutManager.as:880]
    at mx.core::UIComponent/validateNow()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\UIComponent.as:5679]
    at mx.controls.dataGridClasses::DataGridBase/updateRendererDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1184]
    at mx.controls.dataGridClasses::DataGridBase/drawItem()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1154]
    at mx.controls.dataGridClasses::DataGridBase/drawVisibleItem()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:1127]
    at mx.controls.dataGridClasses::DataGridBase/makeRows()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:708]
    at mx.controls.dataGridClasses::DataGridBase/makeRowsAndColumns()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:593]
    at mx.controls::DataGrid/makeRowsAndColumns()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\DataGrid.as:1545]
    at mx.controls.listClasses::ListBase/makeRowsAndColumnsWithExtraRows()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:1380]
    at mx.controls.listClasses::ListBase/updateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3726]
    at mx.controls.dataGridClasses::DataGridBase/updateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\dataGridClasses\DataGridBase.as:581]
    at mx.controls::DataGrid/updateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\DataGrid.as:1444]
    at mx.controls.listClasses::ListBase/validateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\controls\listClasses\ListBase.as:3348]
    at mx.managers::LayoutManager/validateDisplayList()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\LayoutManager.as:622]
    at mx.managers::LayoutManager/doPhasedInstantiation()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\LayoutManager.as:695]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\UIComponent.as:8733]
    at mx.core::UIComponent/callLaterDispatcher()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\UIComponent.as:8673]

  7. Hi,
    As in the demo – one problem is the inner list takes the row count of the biggest list (here the rowCount for all the inner List is 3 even if the dataprovider has size of 1). can I control that.
    Thanks

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: