How Do I Add Data to a Spark DataGrid in Flex Mobile?

January 1, 2012

When coding for mobile developments in flex (Flash Builder), I had a hard time populating the dataGrid element because it doesn’t use arrayCollections like lists do.  The data source is actually bounded to the IList data type.  An example of setting it up is listed below.

<s:Application
    <fx:Script>
        import mx.collections.IList;
        [Bindable] public var dataGrid:IList = new ArrayList([
            {firstName: "John", lastName: "Doe", phone: "1231231234", email: "test@test.com"},
	    // ... whichever variable names in the DataGrid
        ]);
    </fx:Script>
    <s:DataGrid id="dataGrid" dataProvider="{dataGrid}" width="100%" height="100%">
        <s:columns>
            <s:ArrayList>
		<s:GridColumn dataField="firstName"/>
		<s:GridColumn dataField="lastName"/>
		<s:GridColumn dataField="phone"/>
		<s:GridColumn dataField="email"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
</s:Application>

This DataGrid example has a column per property( GridColumn) and dataField attribute is used to select the dataProvider object property to display in that column.  The dataProvider is  a list of the object properties that are defined in the dataGrid (firstname, lastname,phone, email) and their values for that row.

Stay in Touch!

Subscribe to our newsletter.

Solutions Architecture

browse through our blog articles

Blog Archive