Apache Flex 4.16.1 API Reference | All Packages | All Classes | Index | Frames No Frames |
GridColumn

Package | spark.components.gridClasses
Class | public class GridColumn
Inheritance | GridColumn flash.events.EventDispatcher

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The GridColumn class defines a column of a Spark grid control, such as the Spark DataGrid or Grid control. Each data provider item for the control corresponds to one row of the grid. The GridColumn class specifies the field of the data provider item whose value is to be displayed in the column. It also specifies the item renderer used to display that value, the item editor used to change the value, and other properties of the column.

MXML Syntax Show MXML Syntax
Hide MXML Syntax

The `<s:GridColumn>` tag inherits all of the tag attributes of its superclass and adds the following tag attributes:

      <s:GridColumn
        Properties
        dataField="null"
        dataTipField="null"
        dataTipFormatter="null"
        dataTipFunction="null"
        editable="true"
        formatter="null"
        headerRenderer="null"
        headerText="value of dataField"
        imeMode="null"
        itemEditor="null"
        itemRenderer="null"
        itemRendererFunction="null"
        labelFunction="null"
        maxWidth="NaN"
        minWidth="20"
        rendererIsEditable="false"
        resizeable="true"
        showDataTips="undefined"
        sortable="true"
        sortCompareFunction="null"
        sortDescending="false"
        visible="true"
        width="NaN"
      />

View the examples

See also

spark.components.Grid
spark.components.DataGrid

Public Properties

| Property | Defined By
--- | --- | ---
|  | columnIndex : int [read-only] The position of this column in the grid's column list, or -1 if this column's grid is null. | GridColumn
|  | dataField : String The name of the field or property in the data provider item associated with the column. | GridColumn
|  | dataTipField : String The name of the field in the data provider to display as the datatip. | GridColumn
|  | dataTipFormatter : IFormatter Specifies the formatter used by the column's itemToDataTip() method to convert data provider items to Strings. | GridColumn
|  | dataTipFunction : Function Specifies a callback function to run on each item of the data provider to determine its data tip. | GridColumn
|  | editable : Boolean Indicates whether the items in the column are editable. | GridColumn
|  | editorActivationMouseEvent : String The type of mouse event that starts an editor session. | GridColumn
|  | formatter : IFormatter Specifies the formatter used by the column's itemToLabel() method to convert data provider items to strings. | GridColumn
|  | grid : Grid [read-only] The Grid object associated with this column. | GridColumn
|  | headerRenderer : IFactory The class factory for the IGridItemRenderer class used as the header for this column. | GridColumn
|  | headerText : String Text for the header of this column. | GridColumn
|  | imeMode : String Specifies the IME (Input Method Editor) mode. | GridColumn
|  | itemEditor : IFactory A class factory for IGridItemEditor class used to edit individual grid cells in this column. | GridColumn
|  | itemRenderer : IFactory The class factory for the IGridItemRenderer class used to render individual grid cells. | GridColumn
|  | itemRendererFunction : Function If specified, the value of this property must be an idempotent function that returns an item renderer IFactory based on its data provider item and column parameters. | GridColumn
|  | labelFunction : Function An idempotent function that converts a data provider item into a column-specific string that's used to initialize the item renderer's label property. | GridColumn
|  | maxWidth : Number The maximum width of this column in pixels. | GridColumn
|  | minWidth : Number The minimum width of this column in pixels. | GridColumn
|  | percentWidth : Number The width of this column as a percentage of DataGrid width. | GridColumn
|  | rendererIsEditable : Boolean Determines whether any of the item renderer's controls are editable. | GridColumn
|  | resizable : Boolean Indicates whether the user is allowed to resize the width of the column. | GridColumn
|  | showDataTips : * Indicates whether the datatips are shown in the column. | GridColumn
|  | sortable : Boolean If true, and if the grid's data provider is an ICollectionView, and if the associated grid's sortableColumns property is true, then this column supports interactive sorting. | GridColumn
|  | sortCompareFunction : Function The function that compares two elements during a sort of on the data elements of this column. | GridColumn
|  | sortCompareType : String The sortCompareType defines the valid constant values for the sortCompareType property of the SortField and GridColumn. | GridColumn
|  | sortDescending : Boolean If true, this column is sorted in descending order. | GridColumn
|  | sortField : ISortField [read-only] Returns a SortField that can be used to sort a collection by this column's dataField. | GridColumn
|  | visible : Boolean If true, then display this column. | GridColumn
|  | width : Number The width of this column in pixels. | GridColumn

Public Methods

| Method | Defined By
--- | --- | ---
|  | GridColumn(columnName:String = null) Constructor. | GridColumn
|  | itemToDataTip(item:Object):String Convert the specified data provider item to a column-specific datatip String. | GridColumn
|  | itemToLabel(item:Object):String Convert the specified data provider item to a column-specific String. | GridColumn
|  | itemToRenderer(item:Object):IFactory Convert the specified data provider item to a column-specific item renderer factory. | GridColumn

Public Constants

| Constant | Defined By
--- | --- | ---
|  | ERROR_TEXT : String = [static] The return value for the itemToLabel() or itemToDataTip() method if resolving the corresponding property name (path) fails. | GridColumn

Property Detail

columnIndex | property

`columnIndex:int` [read-only]

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The position of this column in the grid's column list, or -1 if this column's grid is null.

This property can be used as the source for data binding.

Implementation
`public function get columnIndex():int`

dataField | property |

`dataField:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The name of the field or property in the data provider item associated with the column. Each GridColumn requires this property or the `labelFunction` property to be set to calculate the displayable text for the item renderer. If the `dataField` and `labelFunction` properties are set, the data is displayed using the `labelFunction` and sorted using the `dataField`.

This value of this property is not necessarily the String that is displayed in the column header. This property is used only to access the data in the data provider. For more information, see the `headerText` property.

If the column or its grid specifies a `labelFunction`, then the dataField is not used.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get dataField():String`
`public function set dataField(value:String):void`

See also

itemToLabel
labelFunction

dataTipField | property |

`dataTipField:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The name of the field in the data provider to display as the datatip. By default, if `showDataTips` is `true`, the associated grid control looks for a property named `label` on each data provider item and displays it. However, if the data provider does not contain a `label` property, you can set the `dataTipField` property to specify a different property name. For example, you could set the value to "FullName" when a user views a set of people's names included from a database.

`GridColumn.dataTipField` takes precedence over this property.

If this column or its grid specifies a value for the `dataTipFunction` property, then the `dataTipField` property is ignored.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get dataTipField():String`
`public function set dataTipField(value:String):void`

See also

dataTipFunction
itemToDataTip

dataTipFormatter | property |

`dataTipFormatter:IFormatter`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Specifies the formatter used by the column's `itemToDataTip()` method to convert data provider items to Strings.

If the formatter's `styleParent` was not specified, it's set to the column's grid, so that the formatter inherits the grid's `locale` style.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get dataTipFormatter():IFormatter`
`public function set dataTipFormatter(value:IFormatter):void`

See also

itemToDataTip
formatter

dataTipFunction | property |

`dataTipFunction:Function`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Specifies a callback function to run on each item of the data provider to determine its data tip. This property is used by the `itemToDataTip` method.

By default, if `showDataTips` is `true`, the column looks for a property named `label` on each data provider item and displays it as its data tip. However, some data providers do not have a `label` property nor do they have another property that you can use for displaying data in the rows.

For example, you have a data provider that contains a lastName and firstName fields, but you want to display full names as the data tip. You can specify a function to the `dataTipFunction` property that returns a single String containing the value of both fields. You can also use the `dataTipFunction` property for handling formatting and localization.

The signature of the `dataTipFunction` function must match the following:

    dataTipFunction(item:Object, column:GridColumn):String

The `item` parameter is the data provider item for an entire row. The second parameter is this column object.

A typical function might concatenate an item's firstName and lastName properties, or do some custom formatting on a Date value property.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get dataTipFunction():Function`
`public function set dataTipFunction(value:Function):void`

See also

itemToDataTip
dataTipField

editable | property |

`editable:Boolean`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Indicates whether the items in the column are editable. If `true`, and the associated grid's `editable` property is also `true`, the items in a column are editable and can be individually edited by clicking on a selected item, or by navigating to the item and pressing the F2 key.

The default value is `true`.

This property can be used as the source for data binding.

Implementation
`public function get editable():Boolean`
`public function set editable(value:Boolean):void`

See also

spark.components.DataGrid.editable

editorActivationMouseEvent | property |

`editorActivationMouseEvent:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 5.0

Runtime Versions : | Flash Player 11, AIR 3.0

The type of mouse event that starts an editor session. Must be one of values in `GridItemEditorMouseEvent`. Each grid column may use a different value for cell activation. If no value is specified the DataGrid's `editorActivationMouseEvent` will be used.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get editorActivationMouseEvent():String`
`public function set editorActivationMouseEvent(value:String):void`

See also

spark.components.DataGrid

formatter | property |

`formatter:IFormatter`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Specifies the formatter used by the column's `itemToLabel()` method to convert data provider items to strings.

If the formatter's `styleParent` was not specified, it's set to the column's grid, so that the formatter inherits the grid's `locale` style.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get formatter():IFormatter`
`public function set formatter(value:IFormatter):void`

See also

itemToLabel
dataTipFormatter

grid | property |

`grid:Grid` [read-only]

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The Grid object associated with this column.

This property can be used as the source for data binding.

Implementation
`public function get grid():Grid`

headerRenderer | property |

`headerRenderer:IFactory`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The class factory for the IGridItemRenderer class used as the header for this column. If unspecified, the DataGrid controls's `columnHeaderGroup` skin part defines the default header renderer.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get headerRenderer():IFactory`
`public function set headerRenderer(value:IFactory):void`

See also

headerText
IGridItemRenderer

headerText | property |

`headerText:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Text for the header of this column. By default, the associated grid control uses the value of the `dataField` property as the header text.

This property can be used as the source for data binding.

Implementation
`public function get headerText():String`
`public function set headerText(value:String):void`

imeMode | property |

`imeMode:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Specifies the IME (Input Method Editor) mode. The IME enables users to enter text in Chinese, Japanese, and Korean. Flex sets the specified IME mode when the control gets the focus, and sets it back to the previous value when the control loses the focus.

The flash.system.IMEConversionMode class defines constants for the valid values for this property. You can also specify `null` to specify no IME.

The default value is `null`.

Implementation
`public function get imeMode():String`
`public function set imeMode(value:String):void`

See also

flash.system.IMEConversionMode

itemEditor | property |

`itemEditor:IFactory`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

A class factory for IGridItemEditor class used to edit individual grid cells in this column. If this property is null, and the column grid's owner is a DataGrid control, then the value of the DataGrid control's `itemEditor` property is used. If no item editor is specified by the DataGrid control, then use the DefaultGridItemEditor class.

The default item editor is the DefaultGridItemEditor class, which lets you edit a simple text field. You can create custom item renderers by creating a subclass of the GridItemEditor class. Your custom item editor can write data to the entire row of the grid to define more complex editor.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get itemEditor():IFactory`
`public function set itemEditor(value:IFactory):void`

See also

spark.components.gridClasses.DefaultGridItemEditor
spark.components.gridClasses.GridItemEditor

itemRenderer | property |

`itemRenderer:IFactory`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The class factory for the IGridItemRenderer class used to render individual grid cells. If not specified, use the value of the `itemRenderer` property from the associated grid control.

The default item renderer is the DefaultGridItemRenderer class, which displays the data item as text. You can create custom item renderers by creating a subclass of the GridItemRenderer class. Your custom item renderer can access the data from the entire row of the grid to define more complex visual representation of the cell.

The default value is the value of the `itemRenderer` property from the associated grid control, or null.

This property can be used as the source for data binding.

Implementation
`public function get itemRenderer():IFactory`
`public function set itemRenderer(value:IFactory):void`

See also

dataField
spark.skins.spark.DefaultGridItemRenderer
spark.components.gridClasses.GridItemRenderer

itemRendererFunction | property |

`itemRendererFunction:Function`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

If specified, the value of this property must be an idempotent function that returns an item renderer IFactory based on its data provider item and column parameters. Specifying a value to the `itemRendererFunction` property makes it possible to use more than one item renderer in this column.

The function specified to the `itemRendererFunction` property must have the following signature:

    itemRendererFunction(item:Object, column:GridColumn):IFactory

The `item` parameter is the data provider item for an entire row. The second parameter is this column object.

Shown below is an example of an item renderer function:

          function myItemRendererFunction(item:Object, column:GridColumn):IFactory
          {
              return (item is Array) ? myArrayItemRenderer : myItemRenderer;
          }

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get itemRendererFunction():Function`
`public function set itemRendererFunction(value:Function):void`

labelFunction | property |

`labelFunction:Function`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

An idempotent function that converts a data provider item into a column-specific string that's used to initialize the item renderer's `label` property.

You can use a label function to combine the values of several data provider items into a single string. If specified, this property is used by the `itemToLabel()` method, which computes the value of each item renderer's `label` property in this column.

The function specified to the `labelFunction` property must have the following signature:

    labelFunction(item:Object, column:GridColumn):String

The `item` parameter is the data provider item for an entire row. The second parameter is this column object.

A typical label function could concatenate the firstName and lastName properties of the data provider item , or do some custom formatting on a Date value property.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get labelFunction():Function`
`public function set labelFunction(value:Function):void`

See also

itemToLabel
dataField

maxWidth | property |

`maxWidth:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The maximum width of this column in pixels. If specified, the grid's layout makes the column's layout width the smaller of the width of the `typicalItem` and the `maxWidth`. If this column is resizable, this property limits how wide the user can make this column. Setting this property does not change the `width` or `minWidth` properties.

The default value is `NaN`.

This property can be used as the source for data binding.

Implementation
`public function get maxWidth():Number`
`public function set maxWidth(value:Number):void`

minWidth | property |

`minWidth:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The minimum width of this column in pixels. If specified, the grid's layout makes the column's layout width the larger of the width of the `typicalItem` and the `minWidth`. If this column is resizable, this property limits how small the user can make this column. Setting this property does not change the `width` or `maxWidth` properties.

The default value is `20`.

This property can be used as the source for data binding.

Implementation
`public function get minWidth():Number`
`public function set minWidth(value:Number):void`

percentWidth | property |

`percentWidth:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.12.2

Runtime Versions : | Flash Player 13, AIR 13.0

The width of this column as a percentage of DataGrid width. Setting this property does not change the `width` or `minWidth` properties.

The default value is `NaN`.

This property can be used as the source for data binding.

Implementation
`public function get percentWidth():Number`
`public function set percentWidth(value:Number):void`

rendererIsEditable | property |

`rendererIsEditable:Boolean`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Determines whether any of the item renderer's controls are editable. If the column is editable, the focusable controls in the item renderer are given keyboard focus when the user starts editing the item renderer.

When you set this property to `true`, the cell becomes editable when the user clicks inside of it. Because the cell is editable, the DataGrid displays the `editorIndicator` skin part, which appears on top of the `selectionIndicator` skin part. Therefore, the user does not see an indicator for cell selection until the edit session is complete. You can create a custom skin to remove or modify the `editorIndicator` skin part so that the `selectionIndicator` skin part appears. For example, you can set `alpha` property of the `editorIndicator` to allow the `selectionIndicator` to show through, or change the size of the editorIndicator so that it is smaller than the cell.

By setting this property to `true`, you take responsibility for validating and saving input collected by the item renderer. If the item renderer contains an override of the `IGridItemRenderer.prepare()` method, then you must ensure that unsaved input field changes are not overwritten. For example, `rendererIsEditable` is `true` and the renderer contains a single TextInput element that displays the value of `data.myDataField`. If the renderer's `prepare()` method sets the TextInput control's `text` property, then the `prepare()` method must not set the `text` property when there are pending changes.

The default value is `false`.

This property can be used as the source for data binding.

Implementation
`public function get rendererIsEditable():Boolean`
`public function set rendererIsEditable(value:Boolean):void`

resizable | property |

`resizable:Boolean`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Indicates whether the user is allowed to resize the width of the column. If `true`, and the `resizableColumns` property of the associated grid is also `true`, the user can drag the grid lines between the column headers to resize the column.

The default value is `true`.

This property can be used as the source for data binding.

Implementation
`public function get resizable():Boolean`
`public function set resizable(value:Boolean):void`

showDataTips | property |

`showDataTips:*`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Indicates whether the datatips are shown in the column. If `true`, datatips are displayed for text in the rows. Datatips are tooltips designed to show the text that is too long for the row.

If this property's value is undefined, the default, then the associated grid's `showDataTips` property determines if datatips are shown. If this property is set, the grid's `showDataTips` property is ignored.

The default value is `undefined`.

This property can be used as the source for data binding.

Implementation
`public function get showDataTips():*`
`public function set showDataTips(value:any):void`

See also

getShowDataTips

sortable | property |

`sortable:Boolean`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

If `true`, and if the grid's data provider is an ICollectionView, and if the associated grid's `sortableColumns` property is `true`, then this column supports interactive sorting. Typically the column's header handles mouse clicks by setting the data provider's `sort` property to a Sort object whose SortField is this column's `dataField`.

If the data provider is not an ICollectionView, then this property has no effect.

The default value is `true`.

This property can be used as the source for data binding.

Implementation
`public function get sortable():Boolean`
`public function set sortable(value:Boolean):void`

sortCompareFunction | property |

`sortCompareFunction:Function`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The function that compares two elements during a sort of on the data elements of this column. If you specify a value of the `labelFunction` property, you typically also provide a `sortCompareFunction`.

The sortCompareFunction's signature must match the following:

    sortCompareFunction(obj1:Object, obj2:Object, column:GridColumn):int

The function should return a value based on the comparison of the objects:

- -1 if obj1 should appear before obj2 in ascending order.
- 0 if obj1 = obj2.
- 1 if obj1 should appear after obj2 in ascending order.

The function may use the column parameter to write generic compare functions.

Note: The `obj1` and `obj2` parameters are entire data provider elements and not just the data for the item.

If the dataProvider is not an ICollectionView, then this property has no effect.

The default value is `null`.

This property can be used as the source for data binding.

Implementation
`public function get sortCompareFunction():Function`
`public function set sortCompareFunction(value:Function):void`

sortCompareType | property |

`sortCompareType:String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.11

Runtime Versions : | Flash Player 11.8, AIR 3.8

The sortCompareType defines the valid constant values for the `sortCompareType` property of the `SortField` and `GridColumn`.

Use the constants in ActionsScript, as the following example shows:

    	    column.sortCompareType = SortFieldCompareTypes.NUMERIC;

In MXML, use the String value of the constants, as the following example shows:

    	    <s:GridColumn sortCompareType="numeric" />

This property can be used as the source for data binding.

Implementation
`public function get sortCompareType():String`
`public function set sortCompareType(value:String):void`

See also

spark.collections.SortFieldCompareTypes

sortDescending | property |

`sortDescending:Boolean`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

If `true`, this column is sorted in descending order. For example, if the column's `dataField` contains a numeric value, then the first row would be the one with the largest value for this column.

Setting this property does not start a sort; it only sets the sort direction. When the `dataProvider.refresh()` method is called, the sort is performed.

If the data provider is not an ICollectionView, then this property has no effect.

The default value is `false`.

This property can be used as the source for data binding.

Implementation
`public function get sortDescending():Boolean`
`public function set sortDescending(value:Boolean):void`

sortField | property |

`sortField:ISortField` [read-only]

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Returns a SortField that can be used to sort a collection by this column's `dataField`.

If the `sortCompareFunction` property is defined, then the SortField's `compareFunction` is automatically set.

If the `sortCompareFunction` property is not defined and the `dataField` is complex, then the SortField's compare function is assigned to a closure around a default compare function that handles the complex `dataField`.

If the `sortCompareFunction` and `dataField` properties are not defined, but the `labelFunction` property is defined, then it assigns the `compareFunction` to a closure that does a basic string compare on the `labelFunction` applied to the data objects.

Implementation
`public function get sortField():ISortField`

See also

spark.collections.SortField

visible | property |

`visible:Boolean`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

If `true`, then display this column. If `false`, no space will be allocated for this column; it will not be included in the layout.

The default value is `true`.

This property can be used as the source for data binding.

Implementation
`public function get visible():Boolean`
`public function set visible(value:Boolean):void`

width | property |

`width:Number`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The width of this column in pixels. If specified, the grid's layout ignores its `typicalItem` property and this column's `minWidth` and `maxWidth` properties.

The default value is `NaN`.

This property can be used as the source for data binding.

Implementation
`public function get width():Number`
`public function set width(value:Number):void`
Constructor Detail

GridColumn | () | Constructor

`public function GridColumn(columnName:String = null)`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Constructor.

Parameters

| `columnName:String` (default = `null`)`` — Initial value for the `dataField` and `headerText` properties.

Method Detail

itemToDataTip | () | method

`public function itemToDataTip(item:Object):String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Convert the specified data provider item to a column-specific datatip String.

This method uses the values `dataTipField` and `dataTipFunction`. If those properties are null, it uses the corresponding properties from the associated grid control. If `dataTipField` properties is also null in the grid control, then use the `dataField` property.

If `dataTipFunction` and `dataTipFormatter` are null, then this method's value is the same as: `item[dataTipField].toString()`. If `dataTipFormatter` is specified then this method's value is the same as: `dataTipFormatter.format(item[dataTipField])` If resolving the item's `dataField` causes an error to be thrown, `ERROR_TEXT` is returned.

If `item` and `dataTipFunction` are not null, then this method returns `dataTipFunction(item, this)`, where the second argument is this GridColumn.

Parameters

| `item:Object` — The value of `grid.dataProvider.getItemAt(rowIndex)`.

Returns

| `String` — A column-specific string for the specified data provider item or `ERROR_TEXT`.

itemToLabel | () | method |

`public function itemToLabel(item:Object):String`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Convert the specified data provider item to a column-specific String. This method is used to initialize item renderers' `label` property.

If `labelFunction` is null, and `dataField` is a string that does not contain "." field name separator characters, and formatter is null, then this method is equivalent to:

    item[dataField].toString()

If the formatter was specified, then this method's value is:

    formatter.format(item[dataField])

If `dataField` is a "." separated path, then this method looks up each successive path element. For example if `="foo.bar.baz"`, then this method returns a string based on the value of `item.foo.bar.baz`. If resolving the item's `dataField` causes an error to be thrown, ERROR_TEXT is returned.

If `item` and `labelFunction` are not null, then this method returns `labelFunction(item, this)`, where the second argument is this GridColumn.

Parameters

| `item:Object` — The value of `grid.dataProvider.getItemAt(rowIndex)`.

Returns

| `String` — A column-specific string for the specified dataProvider item or ERROR_TEXT.

itemToRenderer | () | method |

`public function itemToRenderer(item:Object):IFactory`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

Convert the specified data provider item to a column-specific item renderer factory. By default this method calls the `itemRendererFunction` if it's non-null, otherwise it just returns the value of the column's `itemRenderer` property.

Parameters

| `item:Object` — The value of `grid.dataProvider.getItemAt(rowIndex)`.

Returns

| `IFactory` — A column-specific item renderer factory for the specified dataProvider item.

Constant Detail

ERROR_TEXT | Constant

`public static const ERROR_TEXT:String =`

Language Version : | ActionScript 3.0

Product Version : | Flex 4.5

Runtime Versions : | Flash Player 10, AIR 2.5

The return value for the `itemToLabel()` or `itemToDataTip()` method if resolving the corresponding property name (path) fails. The value of this constant is a single space String: `" "`.

See also

itemToLabel
itemToDataTip
Examples
GridColumnExample.mxml

    <?xml version="1.0" encoding="utf-8"?>
    <!--

      Licensed to the Apache Software Foundation (ASF) under one or more
      contributor license agreements.  See the NOTICE file distributed with
      this work for additional information regarding copyright ownership.
      The ASF licenses this file to You under the Apache License, Version 2.0
      (the "License"); you may not use this file except in compliance with
      the License.  You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.

    -->

    <!--

    A simple example of a DataGrid with explicitly specified columns.

    The DataGrid's columns are specified by an ArrayList (an IList) and can always be accessed as such.
    For example dataGrid.columns.length returns the total number of columns and
    dataGrid.columns.getItemAt(index) returns the GridColumn at the specified index.  The columns list
    is mutable, which means that GridColumns can be added or removed at any time.

    Column widths do not depend on the column's headerText, they're based on the rendered widths of
    the DataGrid's typicalItem. If that's not specified, then the first data item is used.  That's the
    case here.  Each column can specify an explicit width and by default all GridColumns are
    resizable="true", which means that the column can be interactively resized by dragging the edges
    between columns.  Interactively resizing column widths changes the DataGrid's measuredWidth which
    can be a little disconcerting if the DataGrid's width is not constrained.  In this example we've
    constrained the DataGrid's left and right edges which prevents changes in the DataGrid's
    measuredWidth from affecting its actual width.

    -->

    <s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">

        <s:Panel title="Spark DataGrid Control Example which demonstrates a simple DataGrid with explicitly specified columns"
                 width="75%" height="75%"
                 horizontalCenter="0" verticalCenter="0">

            <s:DataGrid id="dataGrid" left="5" right="5" top="5" bottom="5">
                <s:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="key" headerText="Key"/>
                        <s:GridColumn dataField="name" headerText="Name"/>
                        <s:GridColumn dataField="price" headerText="Price"/>
                        <s:GridColumn dataField="call" headerText="Call"/>
                    </s:ArrayList>
                </s:columns>

                <s:ArrayCollection>
                    <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
                    <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
                    <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
                    <s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
                    <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
                    <s:DataItem key="1005" name="File" price="150.05" call="true"/>
                    <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
                    <s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
                    <s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
                    <s:DataItem key="1009" name="Jack" price="190.09" call="true"/>
                </s:ArrayCollection>
            </s:DataGrid>
        </s:Panel>
    </s:Application>

GridColumnVisibilityExample.mxml

    <?xml version="1.0" encoding="utf-8"?>
    <!--

      Licensed to the Apache Software Foundation (ASF) under one or more
      contributor license agreements.  See the NOTICE file distributed with
      this work for additional information regarding copyright ownership.
      The ASF licenses this file to You under the Apache License, Version 2.0
      (the "License"); you may not use this file except in compliance with
      the License.  You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.

    -->

    <!--

    Demonstrate the GridColumn visible property and the support for dynamically adding and removing columns.

    After selecting a column it's visibility can be changed, a copy of the column can be inserted, and the column can be removed.

    The DataGrid columns property is a mutable list - an IList, like ArrayList - and columns can be added or removed at any time.  The difference
    between an IList and an intrinsic collection type like Array or Vector is that ILists dispatch events when they're changed.   That's why the
    DropDownList, whose dataProvider is the list of columns, tracks the changes made with the Add/Remove buttons.

    Changing a column's visibility does not change its presence or position in the columns IList but it prevents the DataGrid from displaying it.

    -->

    <s:Application
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">

        <fx:Script>
            <![CDATA[
                // Insert a column to the left of specified column
                private function addNewColumn(column:GridColumn):void
                {
                    const newColumn:GridColumn = new GridColumn();
                    newColumn.dataField = column.dataField;
                    newColumn.headerText = column.headerText + "+";
                    dataGrid.columns.addItemAt(newColumn, column.columnIndex);
                }

                // Remove the specified column
                private function removeColumn(column:GridColumn):void
                {
                    dataGrid.columns.removeItemAt(column.columnIndex);
                }
            ]]>
        </fx:Script>

        <s:Panel title="Spark DataGrid Control Example which demonstrates the GridColumn visible property and dynamically adding and removing columns"
                 width="75%" height="75%"
                 horizontalCenter="0" verticalCenter="0">

            <s:controlBarContent>
                <s:HGroup verticalAlign="baseline">
                    <s:DropDownList id="ddl" prompt="Select" dataProvider="{dataGrid.columns}" labelField="headerText"/>
                    <s:Label text="Visible:"/>
                    <s:CheckBox selected="@{ddl.selectedItem.visible}" enabled="{ddl.selectedItem}"/>
                    <s:Button label="Add" click="addNewColumn(ddl.selectedItem)" enabled="{ddl.selectedItem}"/>
                    <s:Button label="Remove" click="removeColumn(ddl.selectedItem)" enabled="{ddl.selectedItem}"/>
                </s:HGroup>
            </s:controlBarContent>

            <s:DataGrid id="dataGrid" left="5" right="5" top="5" bottom="5">
                <s:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="key" headerText="Key"/>
                        <s:GridColumn dataField="name" headerText="Name"/>
                        <s:GridColumn dataField="price" headerText="Price"/>
                        <s:GridColumn dataField="call" headerText="Call"/>
                    </s:ArrayList>
                </s:columns>

                <s:ArrayCollection>
                    <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
                    <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
                    <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
                    <s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
                    <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
                    <s:DataItem key="1005" name="File" price="150.05" call="true"/>
                    <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
                    <s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
                    <s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
                    <s:DataItem key="1009" name="Jack" price="190.09" call="true"/>
                </s:ArrayCollection>
            </s:DataGrid>
        </s:Panel>
    </s:Application>

Wed Nov 15 2017, 09:50 AM +01:00