Using a CheckBox in a Spark DataGrid

Today, we just posted a new stable build of the Flex 4.5 SDK on our opensource site. This is build 19786 and it includes a lot of improvements in our Spark DataGrid from the last stable build from November. Since the APIs for the DataGrid will likely not change between now and our release, I thought I’d start posting some simple DataGrid tutorials.

First up, this example shows how to use a CheckBox as an itemRenderer in a Spark DataGrid.  Coming from Flex 3, you will notice that the syntax for the Spark DataGrid is slightly different.

In this example, I have a three column DataGrid. The first two columns use the default itemRenderer. The last column uses an inline itemRenderer of a centered CheckBox.

Sample Code: DataGrid_CheckBoxExample.mxml

Run Sample: DataGrid_CheckBoxExample.swf

9 responses

  1. […] this week including how to change the background color of a row using itemRendererFunction, how to use a CheckBox and how to outline the selected […]

  2. Hello,

    there is a little bug in this example: When you check/uncheck a checkbox and then sort the datagrid by clicking on the Headercolumns then the checkboxes switch back to their initial values.

    One solution would be that you modify the data after checking/unchecking a checkbox.

    mfg Mauser

  3. Srikanth Kuruganti | Reply

    Thank you very much for the code..already spent 3 hrs for this. saved my rest of the day.

  4. You aren’t saving the checkbox data back to the model. Try clicking on all the boxes and then sort by clicking on the header of the first column. The checkboxes revert to the data in the model (which hasn’t changed).

  5. Hi! thanks for the post.
    Is their any method to insert checkbox in only one cell of the list or data grid.

  6. Don’t use JPG for this kind of images! Use PNG!

  7. thanks 🙂

  8. Hi,
    Thanks for your post, that’s a stuff I really need. But, as mobile me is over, could you repost your files ?

  9. Links doest’n work :S

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: