mx.controls
Class DataGrid

class DataGrid
extends mx.controls.List

The DataGrid control is a list that can show more than one column of data. It is a formatted table of data that lets you set editable table cells. It is also the foundation of many data-driven applications.

The DataGrid control provides the following features:

MXML Syntax

The <mx:DataGrid> tag inherits all the properties of its parent classes, and the following properties: 

 <mx:DataGrid
   alternatingRowColors="No default."
   backgroundColor="No default."
   backgroundDisabledColor="0xEFEEEF"
   cellRenderer="No default."
   columns="No default."
   columnName="No default."
   dataProvider="No default."
   editable="false|true"
   focusedCell="No default."
   headerColor="No default."
   headerHeight="20"
   headerStyle="No default."
   hGridLineColor="#666666"
   hGridLines="false|true"
   hPosition="0"
   hScrollPolicy="off|on"
   labelStyle="No default."
   resizableColumns="true|false"
   rollOverColor="#0xE3FFD6"
   selectable="true"
   selectionColor="#0xCDFFC1"
   selectionEasing="No default."
   showHeaders="true|false"
   sortableColumns="true|false"
   useRollOver="true|false"
   vGridLineColor="#666666"
   vGridLines="false|true"
   cellEdit="Event handler; no default."
   cellFocusIn="Event handler; no default."
   cellFocusOut="Event handler; no default."
   cellPress="Event handler; no default."
   change="Event handler; no default."
   columnStretch="Event handler; no default."
   headerRelease="Event handler; no default."
 >
   <mx:dataProvider>
     <mx:Array>
       <mx:Object Artist="Pavement" Price="11.99"
         Album="Slanted and Enchanted" />
       <mx:Object Artist="Pavement"
         Album="Brighten the Corners" Price="11.99" />
     </mx:Array>
   </mx:dataProvider>
   <mx:columns>
     <mx:Array>
       <mx:DataGridColumn columnName="Album" />
       <mx:DataGridColumn columnName="Price" />
     </mx:Array>
   </mx:columns>
 </mx:DataGrid>

See Also
mx.controls.gridclasses.DataGridColumn;
mx.controls.gridclasses.DataGridRow;
mx.effects.Tween;
mx.managers.CursorManager;


Methods
      addColumn(newCol) : DataGridColumn
Appends a column to the end of the DataGrid.
      addColumnAt(index:Number, newCol) : DataGridColumn
Adds a column at the specified location.
      disposeEditor() : Void
Returns cell to normal state after editing.
      draw() : Void
Dispatches all scheduled drawing work in the right sequence to properly render the grid.
      editCell() : Void
Edits the contents of a cell.
      editField(index:Number, colName:String, data) : Void
Field to edit.
      getColumnAt(index:Number) : DataGridColumn
Column at a specified location.
      getColumnIndex(name:String) : Number
Location of a specified column.
      getRowMetrics() : Object
Determines the layout of the rows inside the list.
      initHeaders() : Void
Lays out the column headings.
      removeAllColumns() : Void
Removes all columns.
      removeColumnAt(index:Number) : DataGridColumn
Removes a column at the specified location.
      setRowCount(rC:Number) : Void
Determines the layout of a specific number of rows.
      spaceColumnsEqually() : Void
Makes all columns display with the same width.
      startSizing() : Void
Indicates where the right side of a resized column appears.
      stopSizing() : Void
Determines how much to resize the column.
      tabHandler() : Void
Determines how to navigate with the Tab key.

Methods inherited from class mx.controls.listclasses.ScrollSelectList
calculateWidths  setPropertiesAt 

Methods inherited from class mx.core.ScrollView
setScrollProperties  getViewMetrics  createChild 

Methods inherited from class mx.core.View
init  draw  createChild  getChildAt  getChildIndex  setChildIndex  destroyAllChildren  destroyChild  destroyChildAt  getViewMetrics 

Methods inherited from class mx.core.UIComponent
getFocus  setFocus  getFocusManager 

Methods inherited from class mx.core.UIObject
createAccessibilityImplementation  measure  doLater  cancelAllDoLaters  invalidate  invalidateStyle  invalidateProperties  invalidateSize  redraw  move  setSize  setSizeNoLayout  drawRect  fillRect  destroyLabel  createClassObject  createEmptyObject  destroyObject  getStyle  setMask  swapDepths 


Properties
staticversion:String  
ComponentVersion is for internal use only.
      selectable:Boolean  
If true, the user can select DataGrid items.
      resizableColumns:Boolean  
If true, the user can stretch the columns of the DataGrid control.
      sortableColumns:Boolean  
If true, the user can sort the columns of the DataGrid control by clicking on the headers.
      editable:Boolean  
If true, the text area of the control is editable.
      columns:Array   [Read-Write]
Set of field names within each item that to display as columns.
      columnNames:Array   [Read-Write]
Field names to display as column headings.
      showHeaders:Boolean   [Read-Write]
If true, the DataGrid control shows column headers.
      headerHeight:Number   [Read-Write]
Height of the header bar of the grid, in pixels.

Properties inherited from class mx.controls.List
version  dataProvider 

Properties inherited from class mx.controls.listclasses.ScrollSelectList
dragEnabled  dataProvider  addItemAt  addItem  removeItemAt  removeAll  replaceItemAt  sortItemsBy  sortItems  getLength  getItemAt  value  selectedIndex  selectedIndices  selectedItems  selectedItem  selectable  multipleSelection  dropIndicatorSkin  rowHeight  rowCount  cellRenderer  labelField  labelFunction  iconField  iconFunction 

Properties inherited from class mx.core.ScrollView
version  className  hScrollPolicy  vScrollPolicy  hPosition  vPosition  maxVPosition  maxHPosition 

Properties inherited from class mx.core.View
version  className  numChildren 

Properties inherited from class mx.core.UIComponent
version  enabled  tabIndex 

Properties inherited from class mx.core.UIObject
version  nestLevel  dispatchEvent  addEventListener  handleEvent  removeEventListener  kStretch  styleName  className  setStyle  parentApplication  isDocument  parentDocument  documentDescriptor  descriptor  instanceIndices  repeaterIndices  getRepeaterItem  id  width  height  x  y  minHeight  minWidth  preferredHeight  preferredWidth  maxHeight  maxWidth  widthFlex  heightFlex  visible  scaleX  scaleY  alpha  depth  mouseX  mouseY  toolTip  baselinePosition 


Effects

Effects inherited from class mx.core.UIComponent
showEffect  hideEffect  focusInEffect  focusOutEffect 

Effects inherited from class mx.core.UIObject
creationCompleteEffect  moveEffect  resizeEffect  mouseDownEffect  mouseOverEffect  mouseOutEffect  mouseUpEffect 


Events
cellPressHandler for cellPress events, which are broadcast when the user presses a particular cell. The event object contains the properties: - itemIndex Index of the selected item.
- columnIndex Index of the selected column.
- view Currently selected Object. Target contains a reference to the component that triggered the event. Type contains the name of the event.
cellEditHandler for cellEdit events, which are broadcast when a cell value changes. Target contains a reference to the component that triggered the event. The event object contains the properties: - itemIndex Index of the selected item.
- columnIndex Index of the selected column.
- oldValue Previous value of the cell.
Type contains the name of the event.
cellFocusInHandler for cellFocusIn events, which are broadcast when a particular cell gets focus. The event object contains the properties: - itemIndex Index of the selected item.
- columnIndex Index of the selected column.
Target contains a reference to the component that triggered the event. Type contains the name of the event.
cellFocusOutHandler for cellFocusOut events, which are broadcast when a particular cell loses focus. The event object contains the properties: - itemIndex Index of the selected item.
- columnIndex Index of the selected column.
Target contains a reference to the component that triggered the event. Type contains the name of the event.
columnStretchHandler for columnStretch events, which are broadcast when a user stretches a column horizontally. The event object contains the properties: - columnIndex Index of the selected column.
Target contains a reference to the component that triggered the event. Type contains the name of the event.
headerReleaseHandler for headerRelease events, which are broadcast when a column header is released. The event object contains the properties: - view Currently selected Object. - columnIndex Index of the selected column.
Target contains a reference to the component that triggered the event. Type contains the name of the event.

Events inherited from class: mx.controls.listclasses.ScrollSelectList
change  itemRollOver  itemRollOut 

Events inherited from class: mx.core.ScrollView
scroll 

Events inherited from class: mx.core.View
childCreated  childIndexChanged  childDestroyed 

Events inherited from class: mx.core.UIComponent
focusIn  focusOut  keyDown  keyUp  show  hide  valid  invalid  valueCommitted 

Events inherited from class: mx.core.UIObject
initialize  creationComplete  resize  move  draw  load  unload  mouseDown  mouseUp  mouseMove  mouseOver  mouseOut  mouseDownSomewhere  mouseUpSomewhere  mouseMoveSomewhere  mouseChangeSomewhere  effectStart  effectEnd  dragBegin  dragComplete  dragEnter  dragOver  dragExit  dragDrop 


Styles
backgroundColor Type: Number   Format: Color   CSS Inheritance: yes
Background color.
backgroundDisabledColor Type: Number   Format: Color   CSS Inheritance: yes
Background color of check boxes and radio buttons when disabled. The default value is 0xEFEEEF.
vGridLines Type: Boolean   CSS Inheritance: no
If true, shows vertical grid lines. If false, hides vertical grid lines. The default is false.
hGridLines Type: Boolean   CSS Inheritance: no
If true, shows horizontal grid lines. If false, hides horizontal grid lines. The default value is false.
vGridLineColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the vertical grid lines. The default value is #666666.
hGridLineColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the horizontal grid lines. The default value is #666666.
headerColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the column headers
rollOverColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the background when the user rolls over the link. The default value is #0xE3FFD6.
selectionColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the background when the user selectes the link. The default value is #0xCDFFC1.
headerStyle Type: String   CSS Inheritance: yes
CSS style declaration for the column header that you apply to a grid or column.

Styles inherited from class mx.controls.List
alternatingRowColors  rollOverColor  selectionColor  selectionEasing  textDisabledColor  textRollOverColor  textSelectedColor 

Styles inherited from class mx.core.UIComponent
backgroundColor  backgroundDisabledColor  backgroundImage  backgroundAlpha  backgroundSize  barColor  borderCapColor  borderColor  buttonColor  borderStyle  disabledColor  errorColor  highlightColor  lineHeight  modalTransparency  scrollTrackColor  shadowColor  shadowCapColor  symbolColor  symbolBackgroundColor  symbolBackgroundDisabledColor  symbolBackgroundPressedColor  symbolDisabledColor  themeColor 

Styles inherited from class mx.core.UIObject
color  fontFamily  fontSize  fontStyle  fontWeight  textAlign  textDecoration  textIndent  marginLeft  marginRight  horizontalGap  verticalGap 


Method Detail

addColumn

addColumn(newCol) : DataGridColumn

Appends a column to the end of the DataGrid.

Parameters
     newCol - The string name of the new column, or a DataGridColumn.

Returns
     The new column.

addColumnAt

addColumnAt(index:Number, newCol) : DataGridColumn

Adds a column at the specified location.

Parameters
     index - The index for the new column.
     newCol - The string name of the new column, or a DataGridColumn.

Returns
     The new column.

disposeEditor

disposeEditor() : Void

Returns cell to normal state after editing.

draw

draw() :  Void

Dispatches all scheduled drawing work in the right sequence to properly render the grid. It is essential to follow the order strictly. Inherited from list.

editCell

editCell() :  Void

Edits the contents of a cell.

editField

editField(index:Number, colName:String, data) : Void

Field to edit.

Parameters
     index - Index of the item to edit.
     colName - Name of the field to edit.
     data - New data to put in the edited field.

getColumnAt

getColumnAt(index:Number) : DataGridColumn

Column at a specified location.

Parameters
     index - Index of the column to retrieve.

Returns
     Column at the specified index.

getColumnIndex

getColumnIndex(name:String) : Number

Location of a specified column.

Parameters
     name - Name of the column whose index you want.

Returns
     The column index.

getRowMetrics

getRowMetrics() : Object

Determines the layout of the rows inside the list. Accomodates the headerHeight, and ensures that if the width has changed, more header background is displayed. Inherited from list.

initHeaders

initHeaders() : Void

Lays out the column headings.

removeAllColumns

removeAllColumns() : Void

Removes all columns.

removeColumnAt

removeColumnAt(index:Number) : DataGridColumn

Removes a column at the specified location.

Parameters
     index - Index of the column to remove.

Returns
     The removed column.

setRowCount

setRowCount(rC:Number) : Void

Determines the layout of a specific number of rows. Accomodates the header height. Inherited from list.

Parameters
     rC - row count

spaceColumnsEqually

spaceColumnsEqually() : Void

Makes all columns display with the same width.

startSizing

startSizing() : Void

Indicates where the right side of a resized column appears.

stopSizing

stopSizing() : Void

Determines how much to resize the column.

tabHandler

tabHandler() : Void

Determines how to navigate with the Tab key.


Property Detail

columnNames

columnNames:Array   [Read-Write]

Field names to display as column headings.

columns

columns:Array   [Read-Write]

Set of field names within each item that to display as columns.

editable

editable:Boolean  

If true, the text area of the control is editable. The default value is false.

headerHeight

headerHeight:Number   [Read-Write]

Height of the header bar of the grid, in pixels. The default height is 20.

resizableColumns

resizableColumns:Boolean  

If true, the user can stretch the columns of the DataGrid control. The value of this property must be true for individual columns to be resizable. The default value is true.

selectable

selectable:Boolean  

If true, the user can select DataGrid items. The default value is true.

showHeaders

showHeaders:Boolean   [Read-Write]

If true, the DataGrid control shows column headers. The default value is true.

sortableColumns

sortableColumns:Boolean  

If true, the user can sort the columns of the DataGrid control by clicking on the headers. This property must be set to true for individual columns to be sortable. Must be set to true to receive the headerPress event. The default value is true.

version

static version:String  

ComponentVersion is for internal use only.