Binding controls to data

When accessing a data service, Flash Builder provides tools to bind data to data controls, such as a DataGrid. Flash Builder creates columns in a DataGrid based on the data returned from the service. Typically, you need to configure the generated DataGrid columns. Flash Builder provides an editor to configure columns of a DataGrid and Advanced DataGrid component.

For more information on binding data to data controls, see Binding service operations to controls.

Configuring DataGrid and AdvancedDataGrid components

You configure DataGrid columns in Design mode of the MXML editor. The following procedure shows how to configure the columns of a DataGrid component that access a data service. Similarly, you can configure the columns of an AdvancedDataGrid component.

Configure DataGrid columns

  1. In Design mode of the MXML editor, add a DataGrid (or AdvancedDataGrid) control. Bind the control to data returned from a data service.

    For information, see Binding service operations to controls.

  2. Select the DataGrid and then select Configure Columns from the Property Inspector.

    You can also select Configure Columns from the DataGrid’s context menu.

  3. In the Configure Columns dialog, use the Add, Delete, Up, and Down buttons to add, remove, or reorder the columns.

  4. Use the Standard View of the Configure Columns dialog to edit the commonly used properties of a selected column.

    • Data Binding

      Select the data field to display in the column. The Bind To Field combo box displays all available fields from the returned data. If the DataGrid is editable, you can select whether data in this column is editable.

      If the data to display does not come from a data service, then the Bind to Field is simply a text box. Use the Bind to Field to represent columns defined in the data source. For example, you could specify the names of columns defined in an XMLList. If the specified name does not correspond to a defined data source, the value is ignored and the column remains empty.

      Columns that are programmatically added to a DataGrid cannot be configured using the Data Binding features.

    • General Properties

      Specify the header text and width of the column. Also, whether the column can be resized or sorted.

      Specify Width in pixels. The default width is 100 pixels. If the DataGrid’s horizontalScrollPolicy property is false, all visible columns are displayed. To ensure that all visible columns are displayed, the DataGrid does not always honor the specified value for width.

    • Text Properties

      Specify text formatting styles for the text in the column.

  5. Use the Advanced View of the Configure Columns dialog to view and edit the settings for all properties of a selected column.