Displays a Button that may be triggered to display a TreeGridView as a pop-up. The tree grid view may be customized to display in different ways, such as a drop-down, inside a Callout, or as a modal overlay.

The following example creates a pop-up tree, gives it a data provider, tells the item renderer how to interpret the data, and listens for when the selection changes:

var popUpTreeGridView = new PopUpTreeGridView();

popUpTreeGridView.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);
popUpTreeGridView.columns = new ArrayCollection([
	new TreeGridViewColumn("Department", (data) -> data.dept),
	new TreeGridViewColumn("Item", (data) -> data.item),
	new TreeGridViewColumn("Unit Price", (data) -> data.price)
]);
popUpTreeGridView.itemToText = (item:Dynamic) -> {
	if (popUpTreeGridView.dataProvider.isBranch(item)) {
		return item.dept;
	}
	return item.item;
}

popUpTreeGridView.addEventListener(Event.CHANGE, (event:Event) -> {
	var popUpTreeGridView = cast(event.currentTarget, TreeGridView);
	trace("PopUpTreeGridView changed: " + popUpTreeGridView.selectedLocation + " " + popUpTreeGridView.selectedItem.item);
});

this.addChild(popUpTreeGridView);

Events:

openfl.events.Event.CHANGE

Dispatched when either PopUpTreeGridView.selectedItem or PopUpTreeGridView.selectedLocation changes.

openfl.events.Event.OPEN

Dispatched when the pop-up tree grid view is opened.

openfl.events.Event.CLOSE

Dispatched when the pop-up tree grid view is closed.

feathers.events.TreeGridViewEvent.ITEM_TRIGGER

Dispatched when the user taps or clicks an item renderer in the pop-up tree grid view. The pointer must remain within the bounds of the item renderer on release, and the tree view cannot scroll before release, or the gesture will be ignored.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

Static variables

@:value("popUpTreeGridView_button")staticfinalread onlyCHILD_VARIANT_BUTTON:String = "popUpTreeGridView_button"

The variant used to style the Button child component in a theme.

To override this default variant, set the PopUpTreeGridView.customButtonVariant property.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:value("popUpTreeGridView_treeGridView")staticfinalread onlyCHILD_VARIANT_TREE_GRID_VIEW:String = "popUpTreeGridView_treeGridView"

The variant used to style the TreeGridView child component in a theme.

To override this default variant, set the PopUpTreeGridView.customTreeGridViewVariant property.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

Constructor

new(?dataProvider:IHierarchicalCollection<Dynamic>, ?changeListener:Event ‑> Void)

Creates a new PopUpTreeGridView object.

Available since

feathersui-data-containers-pack 1.0.0

.

Variables

buttonFactory:AbstractDisplayObjectFactory<Dynamic, Button>

Creates the button, which must be of type feathers.controls.Button.

In the following example, a custom button factory is provided:

popUpTreeGridView.buttonFactory = () ->
{
	return new Button();
};
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.controls.Button

cellRendererRecycler:AbstractDisplayObjectRecycler<Dynamic, TreeGridViewCellState, DisplayObject>

Manages cell renderers used by the pop-up tree grud view.

In the following example, the pop-up tree grid view uses a custom item renderer class:

popUpTreeGridView.itemRendererRecycler = DisplayObjectRecycler.withClass(CustomItemRenderer);
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.controls.dataRenderers.HierarchicalItemRenderer

  • feathers.controls.dataRenderers.LayoutGroupItemRenderer

columns:IFlatCollection<TreeGridViewColumn>

Defines the set of columns to display for each item in the pop-up 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:

popUpTreeGridView.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" }
]);
popUpTreeGridView.columns = new ArrayCollection([
	new TreeGridViewColumn("Item", (data) -> data.item),
	new TreeGridViewColumn("Department", (data) -> data.dept),
	new TreeGridViewColumn("Price", (data) -> data.price)
]);
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:style@:flash.propertycustomButtonVariant:String

A custom variant to set on the button, instead of PopUpTreeGridView.CHILD_VARIANT_BUTTON.

The customButtonVariant will be not be used if the result of buttonFactory already has a variant set.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:style@:flash.propertycustomTreeGridViewVariant:String

A custom variant to set on the pop-up tree grid view, instead of PopUpTreeGridView.CHILD_VARIANT_TREE_GRID_VIEW.

The customTreeGridViewVariant will be not be used if the result of treeGridViewFactory already has a variant set.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:bindable("dataChange")dataProvider:IHierarchicalCollection<Dynamic>

The collection of data displayed by the pop-up 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:

popUpTreeGridView.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" }
]);
popUpTreeGridView.columns = new ArrayCollection([
	new TreeGridViewColumn("Item", (data) -> data.item),
	new TreeGridViewColumn("Department", (data) -> data.dept),
	new TreeGridViewColumn("Price", (data) -> data.price)
]);
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.data.ArrayHierarchicalCollection

read onlyopen:Bool

Indicates if the tree grid view pop-up is open or closed.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

@:style@:flash.propertypopUpAdapter:IPopUpAdapter

Manages how the tree grid view is displayed when it is opened and closed.

In the following example, a custom pop-up adapter is provided:

popUpTreeGridView.popUpAdapter = new DropDownPopUpAdapter();
Available since

feathersui-data-containers-pack 1.0.0

.

prompt:String

The text displayed by the button when no item is selected.

The following example sets the pop-up tree grid view's prompt:

popUpTreeGridView.prompt = "Select an item";
Available since

feathersui-data-containers-pack 1.0.0

.

@:bindable("change")selectedItem:Dynamic

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.core.IDataSelector.selectedItem

@:bindable("change")selectedLocation:Array<Int>

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

The following example selects a specific location:

popUpTreeGridView.selectedLocation = [2, 0];

The following example clears the currently selected location:

popUpTreeGridView.selectedLocation = null;

The following example listens for when the selection changes, and it prints the new selected location to the debug console:

var popUpTreeGridView = new PopUpTreeGridView();
function changeHandler(event:Event):Void
{
	var popUpTreeGridView = cast(event.currentTarget, PopUpTreeGridView);
	trace("selection change: " + popUpTreeGridView.selectedLocation);
}
popUpTreeGridView.addEventListener(Event.CHANGE, changeHandler);
Available since

feathersui-data-containers-pack 1.0.0

.

treeGridViewFactory:AbstractDisplayObjectFactory<Dynamic, TreeGridView>

Creates the tree grid view that is displayed as a pop-up. The tree grid view must be of type feathers.controls.TreeGridView.

In the following example, a custom tree grid view factory is provided:

popUpTreeGridView.treeGridViewFactory = () ->
{
	return new TreeGridView();
};
Available since

feathersui-data-containers-pack 1.0.0

.

See also:

  • feathers.controls.TreeGridView

Methods

closeTreeGridView():Void

Closes the pop-up tree grid, if it is open.

The following example closes the pop-up tree grid:

if(popUpTreeGridView.open)
{
	popUpTreeGridView.closeGridView();
}

When the pop-up tree closes, the component will dispatch an event of type Event.CLOSE.

Available since

feathersui-data-containers-pack 1.0.0

.

See also:

dynamicitemToText(data:Dynamic):String

Converts an item to text to display within the Button, if the item is selected. By default, the toString() method is called to convert an item to text. This method may be replaced to provide custom text.

For example, consider the following item:

{ text: "Example Item" }

If the Button should display the text "Example Item", a custom implementation of itemToText() might look like this:

popUpTreeGridView.itemToText = (item:Dynamic) -> {
	return item.text;
};
Available since

feathersui-data-containers-pack 1.0.0

.

openTreeGridView():Void

Opens the pop-up tree grid, if it is not already open.

The following example opens the pop-up tree grid:

if(!popUpTreeGridView.open)
{
	popUpTreeGridView.openTreeGridView();
}

When the pop-up tree grid opens, the component will dispatch an event of type Event.OPEN.

Available since

feathersui-data-containers-pack 1.0.0

.

See also: