If true multiple items may be selected at a time. If false, then only a single item may be selected at a time, and if the selection changes, other items are deselected. Has no effect if isSelectable is false.

In the following example, multiple selection is enabled:

grid.allowMultipleSelection = true;

The default value is false.

See also

Specifies a default factory for cell renderers that will be used if the cellRendererFactory from a DataGridColumn is null.

The function is expected to have the following signature:

function():IDataGridCellRenderer

The following example provides a factory for the data grid:

grid.cellRendererFactory = function():IDataGridCellRenderer
{
    var cellRenderer:CustomCellRendererClass = new CustomCellRendererClass();
    cellRenderer.backgroundSkin = new Quad( 10, 10, 0xff0000 );
    return cellRenderer;
};

The default value is null.

See also

Defines the columns to display for each item in the data provider. If null, the data grid will attempt to populate the columns automatically.

The following example passes in a data provider and columns:

grid.dataProvider = new ArrayCollection(
[
    { item: "Chicken breast", dept: "Meat", price: "5.90" },
    { item: "Butter", dept: "Dairy", price: "4.69" },
    { item: "Broccoli", dept: "Produce", price: "2.99" },
    { item: "Whole Wheat Bread", dept: "Bakery", price: "2.49" },
]);

grid.columns = new ArrayCollection(
[
    new DataGridColumn("item", "Item"),
    new DataGridColumn("dept", "Department"),
    new DataGridColumn("price", "Unit Price"),
]);

The default value is null.

See also

The collection of data displayed by the data grid. Changing this property to a new value is considered a drastic change to the data grid's data, so the horizontal and vertical scroll positions will be reset, and the data grid's selection will be cleared.

The following example passes in a data provider and columns:

grid.dataProvider = new ArrayCollection(
[
    { item: "Chicken breast", dept: "Meat", price: "5.90" },
    { item: "Butter", dept: "Dairy", price: "4.69" },
    { item: "Broccoli", dept: "Produce", price: "2.99" },
    { item: "Whole Wheat Bread", dept: "Bakery", price: "2.49" },
]);

grid.columns = new ArrayCollection(
[
    new DataGridColumn("item", "Item"),
    new DataGridColumn("dept", "Department"),
    new DataGridColumn("price", "Unit Price"),
]);

Warning: A data grid's data provider cannot contain duplicate items. To display the same item in multiple item renderers, you must create separate objects with the same properties. This restriction exists because it significantly improves performance.

Warning: If the data provider contains display objects, concrete textures, or anything that needs to be disposed, those objects will not be automatically disposed when the data grid is disposed. Similar to how starling.display.Image cannot automatically dispose its texture because the texture may be used by other display objects, a data grid cannot dispose its data provider because the data provider may be used by other data grids. See the dispose() function on IListCollection to see how the data provider can be disposed properly.

The default value is null.

See also

The default IStyleProvider for all List components.

The default value is null.

See also

Specifies a default factory for header renderers that will be used if the headerRendererFactory from a DataGridColumn is null.

The function is expected to have the following signature:

function():IDataGridHeaderRenderer

The following example provides a factory for the data grid:

grid.headerRendererFactory = function():IDataGridHeaderRenderer
{
    var headerRenderer:CustomHeaderRendererClass = new CustomHeaderRendererClass();
    headerRenderer.backgroundSkin = new Quad( 10, 10, 0xff0000 );
    return headerRenderer;
};

The default value is null.

See also

Determines if this component's children can receive focus. This property is completely independent from the isFocusEnabled property. In other words, it's possible to disable focus on this component while still allowing focus on its children (or the other way around).

In the following example, the focus is disabled:

object.isFocusEnabled = false;

The default value is true.

See also

Determines if items in the data grid may be selected. By default only a single item may be selected at any given time. In other words, if item A is selected, and the user selects item B, item A will be deselected automatically. Set allowMultipleSelection to true to select more than one item without automatically deselecting other items.

The following example disables selection:

grid.isSelectable = false;

The default value is true.

See also

The pending item index to scroll to after validating. A value of -1 means that the scroller won't scroll to an item after validating.

Determines if the data grid's columns may be reordered using drag and drop.

The following example enables column reordering:

grid.reorderColumns = true;

The default value is false.

Determines if the data grid's columns may be resized.

The following example enables column resizing:

grid.resizableColumns = true;

The default value is false.

See also

The index of the currently selected item. Returns -1 if no item is selected.

The following example selects an item by its index:

grid.selectedIndex = 2;

The following example clears the selected index:

grid.selectedIndex = -1;

The following example listens for when selection changes and requests the selected index:

function grid_changeHandler( event:Event ):void
{
    var grid:DataGrid = DataGrid( event.currentTarget );
    var index:int = grid.selectedIndex;
}
grid.addEventListener( Event.CHANGE, grid_changeHandler );

The default value is -1.

See also

The indices of the currently selected items. Returns an empty Vector.<int> if no items are selected. If allowMultipleSelection is false, only one item may be selected at a time.

The following example selects two items by their indices:

grid.selectedIndices = new <int>[ 2, 3 ];

The following example clears the selected indices:

grid.selectedIndices = null;

The following example listens for when selection changes and requests the selected indices:

function grid_changeHandler( event:Event ):void
{
    var grid:DataGrid = DataGrid( event.currentTarget );
    var indices:Vector.<int> = grid.selectedIndices;
}
grid.addEventListener( Event.CHANGE, grid_changeHandler );

See also

The currently selected item. Returns null if no item is selected.

The following example changes the selected item:

grid.selectedItem = grid.dataProvider.getItemAt(0);

The following example clears the selected item:

grid.selectedItem = null;

The following example listens for when selection changes and requests the selected item:

function grid_changeHandler( event:Event ):void
{
    var grid:DataGrid = DataGrid( event.currentTarget );
    var item:Object = grid.selectedItem;
}
grid.addEventListener( Event.CHANGE, grid_changeHandler );

The default value is null.

See also

The currently selected item. The getter returns an empty Vector.<Object> if no item is selected. If any items are selected, the getter creates a new Vector.<Object> to return a list of selected items.

The following example selects two items:

grid.selectedItems = new <Object>[ grid.dataProvider.getItemAt(2) , grid.dataProvider.getItemAt(3) ];

The following example clears the selected items:

grid.selectedItems = null;

The following example listens for when selection changes and requests the selected items:

function grid_changeHandler( event:Event ):void
{
    var grid:DataGrid = DataGrid( event.currentTarget );
    var items:Vector.<Object> = grid.selectedItems;
}
grid.addEventListener( Event.CHANGE, grid_changeHandler );

See also

Determines if the data grid's columns may be sorted.

The following example enables column sorting:

grid.sortableColumns = true;

The default value is false.

See also

Used to auto-size the data grid when a virtualized layout is used. If the data grid's width or height is unknown, the data grid will try to automatically pick an ideal size. This item is used to create a sample item renderer to measure item renderers that are virtual and not visible in the viewport.

The following example provides a typical item:

grid.typicalItem = { text: "A typical item", thumbnail: texture };

The default value is null.

Constructor.

If the component's dimensions have not been set explicitly, it will measure its content and determine an ideal size for itself. If the explicitWidth or explicitHeight member variables are set, those value will be used without additional measurement. If one is set, but not the other, the dimension with the explicit value will not be measured, but the other non-explicit dimension will still need measurement.

Calls saveMeasurements() to set up the actualWidth and actualHeight member variables used for layout.

Meant for internal use, and subclasses may override this function with a custom implementation.

Returns the selected items, with the ability to pass in an optional result vector. Better for performance than the selectedItems getter because it can avoid the allocation, and possibly garbage collection, of the result object.

Parameters

See also

Scrolls the data grid so that the specified item is visible. If animationDuration is greater than zero, the scroll will animate. The duration is in seconds.

If the layout is virtual with variable item dimensions, this function may not accurately scroll to the exact correct position. A virtual layout with variable item dimensions is often forced to estimate positions, so the results aren't guaranteed to be accurate.

If you want to scroll to the end of the data grid, it is better to use scrollToPosition() with maxHorizontalScrollPosition or maxVerticalScrollPosition.

In the following example, the data grid is scrolled to display index 10:

grid.scrollToDisplayIndex( 10 );

Parameters

See also

Dispatched when the selected item changes.

The properties of the event object have the following values:

See also

A function that returns new dividers that separate each of the data grid's columns. If null, no dividers will appear between columns.

The function is expected to have the following signature:

function():DisplayObject

The following example provides a factory for the vertical dividers:

grid.verticalDividerFactory = function():DisplayObject
{
    return = new ImageSkin( texture );
};

The default value is null.

The duration, in seconds, of the animation when the selected item is changed by keyboard navigation and the item scrolls into view.

In the following example, the duration of the animation that scrolls the list to a new selected item is set to 500 milliseconds:

list.keyScrollDuration = 0.5;

The default value is 0.25.

A skin to display when dragging one of the data grid's headers to indicate where it can be dropped.

In the following example, the data grid's header drag indicator is provided:

grid.columnDropIndicatorSkin = new Image( texture );

The default value is null.

See also

The alpha value used for the column's drag avatar.

In the following example, the data grid's column drag avatar alpha value is customized:

grid.columnDragAvatarAlpha = 0.5;

The default value is 0.8.

See also

A background to display in the data grid's header when the container is disabled.

In the following example, the data grid's header is given a disabled background skin:

grid.headerBackgroundDisabledSkin = new Image( texture );

The default value is null.

See also

A function that returns new dividers that separate each of the data grid's header renderers. If null, no dividers will appear between the header renderers.

The function is expected to have the following signature:

function():DisplayObject

The following example provides a factory for the header dividers:

grid.headerDividerFactory = function():DisplayObject
{
    return = new ImageSkin( texture );
};

The default value is null.

The default background to display in the data grid's header.

In the following example, the data grid's header is given a background skin:

scroller.headerBackgroundSkin = new Image( texture );

The default value is null.

See also

Determines if the height of the column drop indicator is equal to the height of the headers, or if it extends to the full height of the data grid's view port.

In the following example, the data grid's column drop skin is extended:

grid.extendedColumnDropIndicator = true;

The default value is false.

See also

Specifies a custom style name for header renderers that will be used if the customHeaderRendererStyleName property from a DataGridColumn is null.

The following example sets the header renderer style name:

column.customHeaderRendererStyleName = "my-custom-header-renderer";

In your theme, you can target this sub-component name to provide different skins than the default style:

getStyleProviderForClass( DefaultDataGridHeaderRenderer ).setFunctionForStyleName( "my-custom-header-renderer", setCustomHeaderRendererStyles );

The default value is null.

See also

Specifies a custom style name for cell renderers that will be used if the customCellRendererStyleName property from a DataGridColumn is null.

The following example sets the cell renderer style name:

column.customCellRendererStyleName = "my-custom-cell-renderer";

In your theme, you can target this sub-component name to provide different skins than the default style:

getStyleProviderForClass( DefaultDataGridCellRenderer ).setFunctionForStyleName( "my-custom-cell-renderer", setCustomCellRendererStyles );

The default value is null.

See also

A skin to display when resizing one of the data grid's headers to indicate how it will be resized.

In the following example, the data grid's column resize skin is provided:

grid.columnResizeSkin = new Image( texture );

The default value is null.

See also

A skin to display when dragging one of the data grid's headers to highlight the column where it was orignally located.

In the following example, the data grid's column overlay skin is provided:

var skin:Quad = new Quad(1, 1, 0x999999);
skin.alpha = 0.5;
grid.columnDragOverlaySkin = skin;

The default value is null.

See also