Tree Layout: A Tree layout allows users to view, navigate, and access the properties in pages in an embedded Page List property. The user can quickly expand and collapse branches of the tree to find entries of current interest.
The layout can display a custom skin; is cross-browser compatible; can be configured to be editable and localizable. Depending on the settings of the control, the user may then be able to perform actions such as "Approve", or open the data object represented by a branch for further review or editing.
Tree Grid Layout: A Tree Grid layout allows users to view (and possibly edit) the data in an embedded Page List or a Report Definition. The layout combines the navigation strengths of a tree control with the quick-access data display of a grid; the layout can display a custom skin; is cross-browser compatible; is sortable by column and fields; can be configured to be editable and localizable.
Note: In many situations, the Tree Grid is an improved alternative to Column Repeat, or Tabbed Repeat controls when large amounts of data need to be displayed, is easier to implement and maintain, and is more convenient for those who have to work with the displayed data.
The UI Gallery landing page contains a working example of this tree repeating layout. To view and interact with this example and review its configuration, select Designer Studio> User Interface > UI Gallery and select Tree Grid in the Repeating Layouts group.
The UI Gallery landing page also contains a working sample. To view and interact with the sample, select Designer Studio > User Interface > UI Gallery. In the Tables & Grids area, select Tree Grid.
Tree layouts show a pictorial representation for displaying hierarchical relationships. For example, in the organizational hierarchy of a Company, A is a manager to employee B.
Expanding the nodes we can see the employees reporting to A. The child node can have additional child nodes. The number of levels and sub levels can be based on the embedded page list or page group property. In UI Gallery example, the tree layout is configured to be edited on click of the node. This is configured in the click action of the grid.
A tree grid is a combination of a Tree and the Grid layout. It shows the hierarchical relationship like a tree and each row in tree grid can display additional columns like a Grid. In this UI Gallery example, it displays additional details of the employee in the same row.
This example uses the same data model that the tree layout was using, so if we expand the nodes we see a similar structure. Notice the employee details of the child node also displays in its row.
The rows on the tree grid layout can be edited by double clicking on the row.
Tree grids can also reference a report definition as its source. The key point to remember is that the report definition used must be of summary type. However tree layouts cannot reference a report definition.