Using a DateField itemRenderer for a Spark DataGrid

Here is another simple example of using a custom itemRenderer in a Spark DataGrid. In this example, I am using an MX DateField component as an inline itemRenderer.
This DataGrid is also editable. Both columns “In Stock?” and “Availability Date” also have the property rendererIsEditor=”true”. This tells the DataGrid that the component specified as the itemRenderer is also the editor for this column. If you do not specify rendererIsEditor=”true”, then, updating the CheckBox or DateField will not actually affect the data. I am setting the selectedDate on the DateField via 2-way dataBinding:

selectedDate="@{data.availabilityDate}"

Here is the code that defines the column using the DateField itemRenderer:

<s:GridColumn headerText="Availability Date" dataField="availabilityDate"
     rendererIsEditable="true">
     <s:itemRenderer>
         <fx:Component>
             <s:GridItemRenderer>
                 <mx:DateField selectedDate="@{data.availabilityDate}"
                      horizontalCenter="0" verticalCenter="0"
                      width="90%"/>
             </s:GridItemRenderer>
         </fx:Component>
     </s:itemRenderer>
 </s:GridColumn>

Run the sample: DataGrid_DateFieldExample.swf

Source code: DataGrid_DateFieldExample.mxml

About these ads

5 responses

  1. Joan-
    So no need for the editorDataField property any more? The value displayed is considered to be the value used in the model?

    Also, does the Spark DataGrid support drop-in item renderers any more?
    Thanks-
    Matt

    1. @Matt There is no equivalent in Spark DataGrid to ‘editorDataField’ in the MX DataGrid. In the example, I didn’t set anything except dataField and it seems to work correctly. If you make a selection and then scroll, the selection remains.

  2. hi,
    i need use combobox like itemRenderer but i can`t.
    You can?

    Thanks

  3. Freelance Flash Flex Developer India Bangalore | Reply

    Thanks for your efforts, I tried this, however hitting issues, and tried in another way which is working for me, code posted at my blog

  4. Any chance of reposting the source code?? The link no longer works.

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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: