class TreeGridView
package feathers.controls
extends BaseScrollContainer › FeathersControl › MeasureSprite › ValidatingSprite
implements IFocusContainer, IDataSelector<Dynamic>
Displays a hierarchical tree 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, resizing columns, and drag and drop re-ordering of columns.
The following example creates a tree grid view, gives it a data provider, tells the columns how to interpret the data, and listens for when the selection changes:
var treeGridView = new TreeGridView();
treeGridView.dataProvider = new ArrayHierarchicalCollection([
{
dept: "Bakery",
children: [
{item: "Whole Wheat Bread", dept: "Bakery", price: "2.49"},
{item: "English Muffins", dept: "Bakery", price: "2.99"},
]
},
{
dept: "Dairy",
children: [
{item: "2% Milk", dept: "Dairy", price: "2.49"},
{item: "Butter", dept: "Dairy", price: "4.69"},
]
},
{
dept: "Meat",
children: [
{item: "Chicken breast", dept: "Meat", price: "5.90"},
{item: "Bacon", dept: "Meat", price: "4.49"},
]
},
{
dept: "Produce",
children: [
{item: "Lettuce", dept: "Produce", price: "1.29"},
{item: "Broccoli", dept: "Produce", price: "2.99"},
]
},
], (item:Dynamic) -> item.children);
treeGridView.columns = new ArrayCollection([
new TreeGridViewColumn("Department", (data) -> data.dept),
new TreeGridViewColumn("Item", (data) -> data.item),
new TreeGridViewColumn("Unit Price", (data) -> data.price)
]);
treeGridView.addEventListener(Event.CHANGE, (event:Event) -> {
var treeGridView = cast(event.currentTarget, TreeGridView);
trace("TreeGridView changed: " + treeGridView.selectedLocation + " " + treeGridView.selectedItem.item);
});
this.addChild(treeGridView);Events:
openfl.events.Event.CHANGE | Dispatched when either
|
|---|---|
feathers.events.TreeGridViewEvent.CELL_TRIGGER | Dispatched when the user taps or clicks a cell renderer in the tree grid view. The pointer must remain within the bounds of the cell renderer on release, and the tree grid view cannot scroll before release, or the gesture will be ignored. |
feathers.events.TreeGridViewEvent.HEADER_TRIGGER | Dispatched when the user taps or clicks a header renderer in the tree 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. |
feathers.events.TreeViewEvent.BRANCH_OPEN | Dispatched when a branch is opened. |
feathers.events.TreeViewEvent.BRANCH_CLOSE | Dispatched when a branch is closed. |
1.0.0
.See also:
Static variables
staticfinalread onlyCHILD_VARIANT_CELL_RENDERER:String = "treeGridView_cellRenderer"
The variant used to style the cell renderers in a theme.
To override this default variant, set the
TreeGridView.customCellRendererVariant property.
1.0.0
.See also:
staticfinalread onlyCHILD_VARIANT_COLUMN_DIVIDER:String = "treeGridView_columnDivider"
The variant used to style the column view port dividers in a theme.
1.0.0
.See also:
staticfinalread onlyCHILD_VARIANT_HEADER_DIVIDER:String = "treeGridView_headerDivider"
The variant used to style the column header dividers in a theme.
1.0.0
.See also:
staticfinalread onlyCHILD_VARIANT_HEADER_RENDERER:String = "treeGridView_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 tree grid view with a border. This variant is used by default on desktop.
The following example uses this variant:
var treeGridView = new TreeGridView();
treeGridView.variant = TreeGridView.VARIANT_BORDER;1.0.0
.See also:
staticfinalread onlyVARIANT_BORDERLESS:String = "borderless"
A variant used to style the tree grid view without a border. This variant is used by default on mobile.
The following example uses this variant:
var treeGridView = new TreeGridView();
treeGridView.variant = TreeGridView.VARIANT_BORDERLESS;1.0.0
.See also:
Constructor
new(?dataProvider:IHierarchicalCollection<Dynamic>, ?columns:IFlatCollection<TreeGridViewColumn>, ?changeListener:Event ‑> Void)
Creates a new TreeGridView object.
1.0.0
.Variables
cellRendererRecycler:AbstractDisplayObjectRecycler<Dynamic, TreeGridViewCellState, DisplayObject>
Manages cell renderers used by the tree grid view.
In the following example, the tree grid view uses a custom cell renderer class:
treeGridView.cellRendererRecycler = DisplayObjectRecycler.withClass(CustomCellRenderer);1.0.0
.See also:
columnDividerFactory:AbstractDisplayObjectFactory<Dynamic, DisplayObject>
Manages the dividers between the tree grid view's columns.
In the following example, the tree grid view uses a custom column divider class:
treeGridView.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<TreeGridViewColumn>
Defines the set of columns to display for each item in the tree grid
view's data provider. If null, the tree 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:
treeGridView.dataProvider = new ArrayHierarchicalCollection([
{ 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" }
]);
treeGridView.columns = new ArrayCollection([
new TreeGridViewColumn("Item", (data) -> data.item),
new TreeGridViewColumn("Department", (data) -> data.dept),
new TreeGridViewColumn("Price", (data) -> data.price)
]);1.0.0
.See also:
customCellRendererVariant:String
A custom variant to set on all cell renderers, instead of
TreeGridView.CHILD_VARIANT_CELL_RENDERER.
The customCellRendererVariant will be not be used if the result of
cellRendererRecycler.create() already has a variant set.
1.0.0
.See also:
customColumnDividerVariant:String
A custom variant to set on all column dividers, instead of
TreeGridView.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:
customHeaderDividerVariant:String
A custom variant to set on all header dividers, instead of
TreeGridView.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:
customHeaderRendererVariant:String
A custom variant to set on all header renderers, instead of
TreeGridView.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:
dataProvider:IHierarchicalCollection<Dynamic>
The collection of data displayed by the tree 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:
treeGridView.dataProvider = new ArrayHierarchicalCollection([
{ 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" }
]);
treeGridView.columns = new ArrayCollection([
new TreeGridViewColumn("Item", (data) -> data.item),
new TreeGridViewColumn("Department", (data) -> data.dept),
new TreeGridViewColumn("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
.forceItemStateUpdate:Bool
Forces the cellRendererRecycler.update() method to be called with the
TreeGridViewCellState when a row validates, and forces the
headerRendererRecycler.update() method to be called with the
TreeGridViewHeaderState when the grid view validates, even if the cell
or header's state has not changed since the previous validation.
Before Feathers UI 1.2, update() was called more frequently, and this
property is provided to enable backwards compatibility, temporarily, to
assist in migration from earlier versions of Feathers UI.
In general, when this property needs to be enabled, its often because of
a missed call to dataProvider.updateAt() (preferred) or
dataProvider.updateAll() (less common).
The forceItemStateUpdate property may be removed in a future major
version, so it is best to avoid relying on it as a long-term solution.
1.2.0
.headerCornerSkin:DisplayObject
The skin to display next to the headers when the vertical scroll bar is
displayed, and extendedScrollBarY is false.
1.3.0
.See also:
headerDividerFactory:AbstractDisplayObjectFactory<Dynamic, InteractiveObject>
Manages the dividers between the tree grid view's headers.
In the following example, the tree grid view uses a custom header divider class:
treeGridView.headerDividerFactory = DisplayObjectFactory.withClass(CustomHeaderDivider);1.0.0
.headerRendererRecycler:AbstractDisplayObjectRecycler<Dynamic, TreeGridViewHeaderState, DisplayObject>
Manages header renderers used by the tree grid view.
In the following example, the tree grid view uses a custom header renderer class:
treeGridView.headerRendererRecycler = DisplayObjectRecycler.withClass(CustomHeaderRenderer);1.0.0
.See also:
layout:ILayout
The layout algorithm used to position and size the tree grid view's items.
By default, if no layout is provided by the time that the tree 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 tree grid view's columns may be resized by mouse/touch.
The following example enables column resizing:
treeGridView.resizableColumns = true;1.0.0
.See also:
rowRendererFactory:AbstractDisplayObjectFactory<Dynamic, TreeGridViewRowRenderer>
Manages row renderers used by the grid view.
In the following example, the grid view uses a custom row renderer class:
treeGridView.rowRendererFactory = DisplayObjectRecycler.withFunction(() -> {
return new TreeGridViewRowRenderer();
});1.3.0
.selectable:Bool
Determines if items in the tree 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 tree grid view:
treeGridView.selectable = false;1.0.0
.See also:
selectedLocation:Array<Int>
The currently selected location. Returns null if no location is
selected.
The following example selects a specific location:
treeView.selectedLocation = [2, 0];The following example clears the currently selected location:
treeView.selectedLocation = null;The following example listens for when the selection changes, and it prints the new selected location to the debug console:
var treeView = new TreeView();
function changeHandler(event:Event):Void
{
var treeView = cast(event.currentTarget, TreeView);
trace("selection change: " + treeView.selectedLocation);
}
treeView.addEventListener(Event.CHANGE, changeHandler);1.0.0
.showHeaderDividersOnlyWhenResizable:Bool
Determines if header dividers are visible only when resizableColumns
is true.
1.0.0
.virtualLayout:Bool
Indicates if the tree grid view's layout is allowed to virtualize items or not.
The following example disables virtual layouts:
treeGridView.virtualLayout = false;1.0.0
.Methods
columnToHeaderRenderer(column:TreeGridViewColumn):DisplayObject
Returns the current header renderer used to render a specific column.
1.0.0
.See also:
headerRendererToColumn(headerRenderer:DisplayObject):TreeGridViewColumn
Returns the current column that is rendered by a specific header renderer.
1.0.0
.See also:
isBranchOpen(branch:Dynamic):Bool
Indicates if a branch is currently opened or closed. If the object is
not a branch, or does not exist in the data provider, returns false.
1.0.0
.itemAndColumnToCellRenderer(item:Dynamic, column:TreeGridViewColumn):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 tree grid views use "virtual" layouts, which means that only the currently-visible subset of items will have cell renderers. As the tree 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
.itemAndColumnToCellState(item:Dynamic, column:TreeGridViewColumn):TreeGridViewCellState
Returns a TreeGridViewCellState representing a specific item and column.
1.3.0
.scrollToLocation(location:Array<Int>, ?animationDuration:Float):Void
Scrolls the tree view so that the specified item renderer is completely visible. If the item renderer 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
.toggleChildrenOf(branch:Dynamic, open:Bool):Void
Opens or closes all children of a branch recursively.
1.0.0
.