Construct the DataGrid

• 1). Open Adobe Flex and view the code for your primary flex application file. There are two types of DataGrids within Flex: the MX DataGrid and the Spark DataGrid. The Spark DataGrid will work best for this project. Add the code for a new Spark DataGrid:
  
  <s:DataGrid id="dG" dataProvider="{grid}" width="100%" height="100%">
  <s:columns>
  <s:ArrayList>
  <s:GridColumn dataField="firstName"/>
  <s:GridColumn dataField="lastName"/>
  <s:GridColumn dataField="Phone"/>
  <s:GridColumn dataField="Address"/>
  </s:ArrayList>
  </s:columns>
  </s:DataGrid>
  
  The above code creates a DataGrid with an ID of "dG" that uses a dataProvider with the name of {grid}. Each "GridColumn" indicates the data that will appear within the DataGrid's columns.
  
  
• 2). Construct the dataProvider. DataProviders can be defined using ActionScript. The following code will create the "grid" dataProvider:
  
  <fx:Script>
  import mx.collections.IList;
  
  [Bindable] public var gridData:IList = new ArrayList([
  {firstName: "John", lastName: "Doe", phone: "555-555-555", address: "500 Anywhere Street"},
  // ... more objects
  ]);
  </fx:Script>
  
  The code above creates an array of data. The "dG" DataGrid is bound to this array and will display the data according to the data column names.
  
  
• 3). Run the application in your browser window to verify that the DataGrid is functioning properly.
  
  

Add a Row Count Column

• 1). Create a new row count column in the "dG" dataGrid. The following code should be placed between the "<s:ArrarList>" opening and closing tags:
  
  <s:GridColumn>
  <s:itemRenderer>
  <fx:Component>
  <s:GridItemRenderer>
  <s:Label text="{rowIndex}" />
  </s:GridItemRenderer>
  </fx:Component>
  </s:itemRenderer>
  </s:GridColumn>
  
  In the code above, "{rowIndex}" is a bindable property. It will place a row number in the DataGrid column we just created.
  
  
• 2). Verify that that code has been properly placed:
  
  <s:DataGrid id="dG" dataProvider="{grid}" width="100%" height="100%">
  <s:columns>
  <s:ArrayList>
  <s:GridColumn>
  <s:itemRenderer>
  <fx:Component>
  <s:GridItemRenderer>
  <s:Label text="{rowIndex}" />
  </s:GridItemRenderer>
  </fx:Component>
  </s:itemRenderer>
  </s:GridColumn>
  <s:GridColumn dataField="firstName"/>
  <s:GridColumn dataField="lastName"/>
  <s:GridColumn dataField="Phone"/>
  <s:GridColumn dataField="Address"/>
  </s:ArrayList>
  </s:columns>
  </s:DataGrid>
  
  The code above will create a contacts DataGrid bound to the "grid" dataProvider with a data column that displays a row count.
  
  
• 3). Run the program and verify that the new row count column appears in your DataGrid. If you scroll to the very last row, you will have the total DataGrid row count.