Find me on:
Contact me at:


Search Ramblings
« Skinning A Flex Spark DataGrid Header | Main | Flex Virtual Flow Layout »

Creating A Flex Spark List of Checkbox Bound To XML DataProvider

For the sake of the cookbook recipe, I will assume you already have the data you are working with in XML format from whatever backend solution you choose.  The simple XML I will be using is:

<fx:XML format="e4x" id="namesXML">
    <person name="Leon"/>
    <person name="Mathilda"/>
    <person name="Stansfield"/>
    <person name="Benny"/>

Displaying all of the people in this list with checkboxes next to their names involves three parts.

  1. Creating an ItemRenderer Component which contains a Checkbox which will display the person's name in "namesXML" as the CheckBox label.
  2. Defining the new ItemRenderer to be the default ItemRenderer of our s:List component.
  3. Defining dataProvider of an s:List component to be the "namesXML" data shown above. 

  First we need to define out ItemRenderer as a new MXML Item Renderer called "CheckBoxItemRenderer".  The source of the file will be:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx=""

<s:CheckBox label="{data.@name}"/>


Notice, that the only component defined within our new MXML ItemRenderer is a s:CheckBox.  The label of this checkbox is bound to the @name attribute of an object called data.  The data Object is autopopulated by the ItemRenderer class and reflects a single node of the dataprovider which is feeding the list of which the ItemRenderer is a part.  Simply, there will be a new instance of the  "CheckBoxItemRenderer" for each node in the "namesXML" and the label of the checkbox will be set to the person's name.


Lastly, we need to define our list which will define it's itemRenderer as "CheckBoxItemRenderer" and it's dataProvider as "namesXML".  Since "namesXML" is XML instead of an XMLListCollection which is required to set a dataProvider, we will need to convert the XML to an XMLListCollection.  The MXML defining the list is:


<s:List itemRenderer="CheckBoxItemRenderer"
    dataProvider="{new XMLListCollection(namesXML.children())}"/>

With that definition, you will now have a list of checkboxes with a person's name next to each checkbox.  The list of names is bound to the "namesXML" and can be updated with updates to the namesXML object feeding the dataProvider.

  Live demo and source code (right click) HERE.

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (4)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Football is really a single of the largest sports in America. It has a big following.
  • Response
  • Response
    Response: Freelance CAD Work
    I will try this tips in order to create this type of check box.
  • Response
    Response: phd dissertation
    Using Action Script 3 programming language, programmers write code called data providers to invent grids furthermore else objects for websites and blogs. Very parallel English, programming code is its acknowledge language. Every programmer might change his coding somewhat based on hellos confidential ordeal.

Reader Comments (2)

Thanks for the post. That's what I need.
But, how can I know which chechbox is selected?

August 29, 2012 | Unregistered CommenterRodolfo Mecalco

Rodolfo, I created an extended tutorial here:

It should show you how to track which checkboxes are selected from within your dataprovider. Don't fall into the trap of trying retrieve the itemrenderer and getting the checkbox's "selected" value directly. That can be dangerous since itemrenderers can be recycled and the value you get could be invalid. See the link above to see how to store the correct values in the dataprovider itself.

Let me know if you need any clarification.

August 29, 2012 | Registered CommenterMike Roberts

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>