class GridView
package feathers.controls
extends BaseScrollContainer › FeathersControl › MeasureSprite › ValidatingSprite
implements IFocusContainer, IDataSelector<Dynamic>, IIndexSelector
Displays a list of items as a table. Each item is rendered as a row, divided into columns for each of the item's fields. Supports scrolling, custom cell, sorting columns, resizing columns, and drag and drop re-ordering of columns.
The following example creates a grid view, gives it a data provider, tells the columns how to interpret the data, and listens for when the selection changes:
var gridView = new GridView();
gridView.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" }
]);
gridView.columns = new ArrayCollection([
new GridViewColumn("Item", (data) -> data.item),
new GridViewColumn("Department", (data) -> data.dept),
new GridViewColumn("Price", (data) -> data.price)
]);
gridView.addEventListener(Event.CHANGE, (event:Event) -> {
var gridView = cast(event.currentTarget, GridView);
trace("GridView changed: " + gridView.selectedIndex + " " + gridView.selectedItem.item);
});
this.addChild(gridView);Events:
openfl.events.Event.CHANGE | Dispatched when either
|
|---|---|
feathers.events.GridViewEvent.CELL_TRIGGER | Dispatched when the user taps or clicks a cell renderer in the grid view. The pointer must remain within the bounds of the cell renderer on release, and the grid view cannot scroll before release, or the gesture will be ignored. |
feathers.events.GridViewEvent.HEADER_TRIGGER | Dispatched when the user taps or clicks a header renderer in the grid view. The pointer must remain within the bounds of the header renderer on release, and the grid view cannot scroll before release, or the gesture will be ignored. |
1.0.0
.See also:
Static variables
staticfinalread onlyCHILD_VARIANT_CELL_RENDERER:String = "gridView_cellRenderer"
The variant used to style the cell renderers in a theme.
1.0.0
.See also:
staticfinalread onlyCHILD_VARIANT_COLUMN_DIVIDER:String = "gridView_columnDivider"
The variant used to style the column view port dividers in a theme.
1.0.0
.See also:
staticfinalread onlyCHILD_VARIANT_HEADER:String = CHILD_VARIANT_HEADER_RENDERER
staticfinalread onlyCHILD_VARIANT_HEADER_DIVIDER:String = "gridView_headerDivider"
The variant used to style the column header dividers in a theme.
1.0.0
.See also:
staticfinalread onlyCHILD_VARIANT_HEADER_RENDERER:String = "gridView_headerRenderer"
The variant used to style the column header renderers in a theme.
1.0.0
.See also:
staticfinalread onlyVARIANT_BORDER:String = "border"
A variant used to style the grid view with a border. This variant is used by default on desktop.
The following example uses this variant:
var gridView = new GridView();
gridView.variant = GridView.VARIANT_BORDER;1.0.0
.See also:
staticfinalread onlyVARIANT_BORDERLESS:String = "borderless"
A variant used to style the grid view without a border. The variant is used by default on mobile.
The following example uses this variant:
var gridView = new GridView();
gridView.variant = GridView.VARIANT_BORDERLESS;1.0.0
.See also:
Constructor
new(?dataProvider:IFlatCollection<Dynamic>, ?columns:IFlatCollection<GridViewColumn>, ?changeListener:Event ‑> Void)
Creates a new GridView object.
1.0.0
.Variables
allowMultipleSelection:Bool
Determines if multiple items may be selected at the same time. Has no
effect if selectable is false.
In the following example, multiple selection is enabled:
gridView.allowMultipleSelection = true;1.0.0
.See also:
cellRendererRecycler:AbstractDisplayObjectRecycler<Dynamic, GridViewCellState, DisplayObject>
Manages cell renderers used by the grid view.
In the following example, the grid view uses a custom cell renderer class:
gridView.cellRendererRecycler = DisplayObjectRecycler.withClass(CustomCellRenderer);1.0.0
.See also:
columnDividerFactory:AbstractDisplayObjectFactory<Dynamic, DisplayObject>
Manages the dividers between the grid view's columns.
In the following example, the grid view uses a custom column divider class:
gridView.columnDividerFactory = DisplayObjectFactory.withClass(CustomColumnDivider);1.0.0
.columnResizeSkin:DisplayObject
The skin to display when a column is being resized.
1.0.0
.See also:
columns:IFlatCollection<GridViewColumn>
Defines the set of columns to display for each item in the grid view's
data provider. If null, the grid view will attempt to populate the
columns automatically using
reflection.
The following example passes in a data provider and tells the columns how to interpret the data:
gridView.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" }
]);
gridView.columns = new ArrayCollection([
new GridViewColumn("Item", (data) -> data.item),
new GridViewColumn("Department", (data) -> data.dept),
new GridViewColumn("Price", (data) -> data.price)
]);1.0.0
.See also:
customColumnDividerVariant:String
A custom variant to set on all column dividers, instead of
GridView.CHILD_VARIANT_COLUMN_DIVIDER.
The customColumnDividerVariant will be not be used if the result of
columnDividerFactory.create() already has a variant set.
1.0.0
.See also:
`GridView.CHILD_VARIANT_COLUMN_DIVIDER
customHeaderDividerVariant:String
A custom variant to set on all header dividers, instead of
GridView.CHILD_VARIANT_HEADER_DIVIDER.
The customHeaderDividerVariant will be not be used if the result of
headerDividerFactory.create() already has a variant set.
1.0.0
.See also:
`GridView.CHILD_VARIANT_HEADER_DIVIDER
customHeaderRendererVariant:String
A custom variant to set on all header renderers, instead of
GridView.CHILD_VARIANT_HEADER_RENDERER.
The customHeaderRendererVariant will be not be used if the result of
headerRendererRecycler.create() already has a variant set.
1.0.0
.See also:
`GridView.CHILD_VARIANT_HEADER_RENDERER
dataProvider:IFlatCollection<Dynamic>
The collection of data displayed by the grid view.
Items in the collection must be class instances or anonymous structures. Do not add primitive values (such as strings, booleans, or numeric values) directly to the collection.
Additionally, all items in the collection must be unique object instances. Do not add the same instance to the collection more than once because a runtime exception will be thrown.
The following example passes in a data provider and tells the columns how to interpret the data:
gridView.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" }
]);
gridView.columns = new ArrayCollection([
new GridViewColumn("Item", (data) -> data.item),
new GridViewColumn("Department", (data) -> data.dept),
new GridViewColumn("Price", (data) -> data.price)
]);1.0.0
.See also:
extendedScrollBarY:Bool
Determines if the vertical scroll bar will start from the top of the headers, instead of starting below them.
1.0.0
.headerDividerFactory:AbstractDisplayObjectFactory<Dynamic, InteractiveObject>
Manages the dividers between the grid view's headers.
In the following example, the grid view uses a custom header divider class:
gridView.headerDividerFactory = DisplayObjectFactory.withClass(CustomHeaderDivider);1.0.0
.headerRendererRecycler:AbstractDisplayObjectRecycler<Dynamic, GridViewHeaderState, DisplayObject>
Manages header renderers used by the grid view.
In the following example, the grid view uses a custom header renderer class:
gridView.headerRendererRecycler = DisplayObjectRecycler.withClass(CustomHeaderRenderer);1.0.0
.layout:ILayout
The layout algorithm used to position and size the grid view's items.
By default, if no layout is provided by the time that the grid view initializes, a default layout that displays items vertically will be created.
The following example tells the list view to use a horizontal layout:
var layout = new VerticalListLayout();
layout.requestedRowCount = 5.0;
layout.gap = 20.0;
layout.padding = 20.0;
listView.layout = layout;1.0.0
.resizableColumns:Bool
Determines if the grid view's columns may be resized by mouse/touch.
The following example enables column resizing:
gridView.resizableColumns = true;See also:
selectable:Bool
Determines if items in the grid view may be selected. By default only a single item may be selected at any given time. In other words, if item A is already selected, and the user selects item B, item A will be deselected automatically.
The following example disables selection of items in the grid view:
gridView.selectable = false;See also:
selectedIndices:Array<Int>
Contains all of the indices that are currently selected. The most recently selected index will appear at the beginning of the array. In other words, the indices are in the reverse order that they were selected by the user.
When the selectedIndices array contains multiple items, the
selectedIndex property will return the first item from
selectedIndices.
1.0.0
.See also:
selectedItems:Array<Dynamic>
Contains all of the items that are currently selected. The most recently selected item will appear at the beginning of the array. In other words, the items are in the reverse order that they were selected by the user.
When the selectedItems array contains multiple items, the
selectedItem property will return the first item from selectedItems.
1.0.0
.See also:
showHeaderDividersOnlyWhenResizable:Bool
Determines if header dividers are visible only when resizableColumns
is true.
sortOrder:SortOrder
Indicates the sort order of sortedColumn, if sortedColumn is not
null. Otherwise, returns SortOrder.NONE.
1.0.0
.See also:
sortableColumns:Bool
Determines if the data grid's columns may be sorted by triggering the
column headers. If a column does not provide a custom
sortCompareFunction, the default behavior will compare the strings
returned byitemToText(). A custom sortCompareFunction is recommended
for comparing numeric values.
The following example enables column sorting:
gridView.sortableColumns = true;See also:
sortedColumn:GridViewColumn
The currently sorted column, or null, if no columns have been sorted.
1.0.0
.virtualLayout:Bool
Indicates if the grid view's layout is allowed to virtualize items or not.
The following example disables virtual layouts:
gridView.virtualLayout = false;1.0.0
.Methods
columnToHeaderRenderer(column:GridViewColumn):DisplayObject
Returns the current header renderer used to render a specific column.
1.0.0
.See also:
headerRendererToColumn(headerRenderer:DisplayObject):GridViewColumn
Returns the current column that is rendered by a specific header renderer.
1.0.0
.See also:
itemAndColumnToCellRenderer(item:Dynamic, column:GridViewColumn):DisplayObject
Returns the current cell renderer used to render a specific column from
an item from the data provider. May return null if an item and column
doesn't currently have a cell renderer.
Note: Most grid views use "virtual" layouts, which means that only the currently-visible subset of items will have cell renderers. As the grid view scrolls, the items with cell renderers will change, and cell renderers may even be re-used to display different items.
1.0.0
.scrollToRowIndex(rowIndex:Int, ?animationDuration:Float):Void
Scrolls the grid view so that the specified row is completely visible. If the row is already completely visible, does not update the scroll position.
A custom animation duration may be specified. To update the scroll
position without animation, pass a value of 0.0 for the duration.
1.0.0
.