data:tree
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
ATTRIBUTES
EXAMPLES
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:audio standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

<data:tree> </...>

Builds a tree widget from a recursive data source. Root nodes are populated by the datasource attribute, and child nodes with the datasourcerecursive attribute.

Content

Trees must contain at least 1 column tag.

Attributes

as
string
The name of the variable to be registered for each row. For example, as="myvar" will let you reference $myvar inside the control.
classRow
string
The CSS class for rows (<tr> tags).
dataFilter
array
A Filter Array, if datasource is a function that supports a Query Array.
dataGroupBy
array
An array of fields to group by, if datasource is a function that supports a Query Array.
dataJoins
array
Array of tables to join with, if datasource is a function that supports a Query Array.
dataLimit
int
The maximum number of results to return, if datasource is a function that supports a Query Array.
dataOrder
array
Sets the order by which the data is sorted

The parameter is a two-dimensional array consisting of column names and the direction of the order.

For example, the following would sort contacts by their last name ascending and in the event of two contacts having the same last name, their first name descending

[['contact_last_name', 'asc'], ['contact_first_name', 'desc']]
dataSearch
string
Filter results if they match this string, if datasource is a function that supports a Query Array.
dataSourceSupportsOrdering
bool
Sets whether the DataSource supports the order parameter.

When set to true, an order parameter will be appended to the data. The order parameter is an array containing values similar to: [['contact_id', 'desc'], ...].
dataSourceSupportsPaging
bool
Sets whether the DataSource supports the paging parameters.

When set to true, two parameters will be appended to the call to the DataSource which represent the start and limit values of pagination.
dataStart
int
The number of results to skip, if datasource is a function that supports a Query Array.
emptyMessage
string
The message shown when there are no rows in the data control.
exportable
bool|string
If true, an 'Export Data' link will appear beneath the control which will save a CSV file to the client of all the data in the control. Default = false.
hasHeadings
bool
Whether or not headings should be displayed
height
string
Height

Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
id
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
keyAs
string
The name of the variable to be registered for each row's key.
For arrays of entities from the database (for example getAll()), the keys will be incrementing integers starting at 0.
paging
bool
Whether to enable paging for this control. With paging enabled, the initial number of results will be limited to the value of pagingrows, and a 'Show More' button will appear.
Each click of the button will append pagingrows more rows. Default = false.
pagingRows
int
Use in conjunction with paging, to control the initial number of rows to be shown, and the number of rows loaded when 'Show More' is clicked. Default = 25.
populateAt
string
Sets when to populate from the datasource. Not required for most tasks, but can resolve timing issues on very complicated pages.
Default = 'init'. Other possible values: 'render'.
width
string
Width

Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
onPopulateServer
callable
Called after the data control has populated from the datasource / component

Examples

Product Categories Tree

Display a list of all Product Categories as checkboxes.

HTML:

<data:tree id="products_categories_tree" as="category" datasource="\Components\Commerce\Products\Categories::getChildren(null)" hasheadings="false" datasourcerecursive="\Components\Commerce\Products\Categories::getChildren($category['product_category_id'])" entityid="$category['product_category_id']"> <data:column> <forms:checkbox id="product_category_id_[? $category['product_category_id'] ?]" value="" label="[? $category['product_category_title'] ?]" name="product_categories[]" valuechecked="[? $category['product_category_id'] ?]" /> </data:column> </data:tree>