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

Advertisement

~ by jlafferty on March 31, 2011.