Using spark datagrid to capture multiple rows of data

Sometimes you need forms to capture entries for multiple rows of data. In such forms each row is a sub object (with multiple associated parameters), like sales report for a particular item or a particular expense in an expense report. The tricky part with such forms is that you can’t predict how many sub objects will be captured, so you need to dynamically add controls to capture data.

To achieve this why not use the spark data grid instead of a form? This way you add a new row to the data grid instead of adding controls for each parameter of sub object.

Lets take a look at an app that captures data for an expense report:

You can download the fxp file for this project from DataGridFormExample.fxp

You can click on the trash icon to delete a row. And if you want to add blank rows, then you can either click on the new icon in the top left of the grid or click the TAB key in the comments field of the last row.

I primarily did the following customization to change the look of the datagrid:

• Custom skin for the datagrid (EntryDGSkin.mxml) to hide all the row and column separators.
• Used custom item renderers and marked rendererIsEditable as true so the controls are always visible when the rows are present in the datagrid

There are validators defined inside the item renderer and when the validation fails the item renderer changes a boolean property (invalidValue) on the parent document. So before saving, the document checks the boolean value to decide whether to proceed with save or not. If you don’t like the approach to set a boolean flag, then you can also access each validator via the itemRenderer for a particular cell. To access the itemRender use the getItemRendererAt() method present on grid property inside the spark data grid.

Also you should pay attention to the prepare()and discard()methods inside the data grid itemRenderers. The prepare() method is called for every visual update and it sets the data to the sub component of item renderer. I am using a boolean flag (pendingEdits – set to false when there are unsaved changes) inside the itemRenderers to decide whether to update the sub component or not.

Spark datagrid is a new feature in Flex SDK 4.5 and to import the fxp file you would need Flash Builder 4.5.
Both Flex SDK 4.5 and Flash Builder 4.5 were announced recently. See the flex team blog

Feedback is welcome