Grid tree



In Profound UI Version 6, Fix Pack 14.0, two new grid properties are added that allow you to present grid data in a tree (similar to Windows Explorer): tree level field and tree level column. This page documents an example of that feature. The example DSPF and RPG source members are attached.

Suppose you have an insurance claims file CLAIMSP with the following fields:   

Claim Number CMNUMBER packed(9: 0) Description CMDESC char(25) City CMCITY char(20) State CMSTATE char(2) Property Damage Cost CMPROPCOST packed(7: 2)



  • You could display the data in a grid, in a "flat" format, with one row per record. Or you could display the data in a grid using a "tree" format, so that you can expand/collapse the rows to see summarized data at different levels. For example, if you want to see the CMPROPCOST data summarized at the city or state level, you can do the following:

  • Have a grid column named "tree level field", and bind it to field treelvlfld. Note that for this example, we show the field in the grid to make it obvious (e.g. for development and testing purposes); normally you would not need to include this field in the grid itself.

  • Bind the grid property "tree level field" to field treelvlfld. Data in this field (level = 1,2,3,...) are used to render the grid in a "tree" format.

  • Have a grid column named "Level description", to show the summarized level description. Set the grid property "tree level column" to this column number of "1" (that is, the 2nd column). The expand/collapse icons will be placed in this column.

  • In the RPG program, load the data for the summary rows (levels 1 and 2) and detail rows (level 3). Set the data in the field treelvlfld in the RPG program at each appproriate level. Please see the attached RPG sample code for details.

  • The grid will be displayed as shown below:

  • You can click on the expand/collapse icons to expand/collapse the rows. For example, clicking on the "-" icon (collapse) on the 1st row (for the state of "IN") will collapse all rows below it where the level is higher than "1", until another row is encountered where the level is "1" or lower.

  • Whereas clicking on the "-" icon (collapse) on the 2nd row (for the city of "IN/AURORA") will collapse all rows below it where the level is higher than "2", until another row is encountered where the level is "2" or lower.



  • You should order the data in the grid in such a way that the tree level makes sense. In this example, the order of the data is in State/City/Claim Number sequence; that is, all rows for a city should be grouped under that city; all rows for a state should be grouped under that state.

  • Note that in the 1st example above, the column with the tree level field is included in the grid (as you may want to do during development and testing). Normally, you would not want to include that column. In the 2nd example below, the grid does not include that column. When you bind the grid property "tree level field" to a field, that field is automatically created for you in the DDS of the subfile as a hidden field so that you can populate it.

  • In 2nd example below, the property "tree level column" is set to "0" to indicate that the 1st column should contain the expand/colappse icons. In general, you should specify the property "tree level column" to be whatever column makes the most sense to you to have the expand/collapse icons.



Attached are the DSPF and SQLRPGLE source members for the example.

Initial collapsed mode

Starting in ProfoundUI 6.18.0, grid property "tree level collapsed" can be used to determine if the rows in a grid tree are first displayed in collapsed mode. The default value is "false". In the example below, the property is set to "true". As a result, when the grid is first displayed, all the tree levels are initially collapsed.



How a grid tree is built

How the grid tree is built depends on the data in the "tree level field" in the grid.

A tree has one or more "nodes" at the top level. Each of those nodes has zero or more child nodes. Each of those child nodes has zero or more child nodes, etc. A grid row is a child node of another previous grid row if its "tree level field" value is one higher than the "tree level field" value of that previous grid row (which is not necessarily the immediately previous grid row).

Below is an example of a "family tree" to illustrate how a grid tree is built. The fields "rrn" and "tree level field" are displayed on the grid for illustration purposes.

  • Node "parent1" (rrn=1) has zero child node.

  • Node "parent2" (rrn=2) has 2 child nodes: "parent2-child1" (rrn=3) and "parent2-child2" (rrn=4).

  • Node "parent3" (rrn=5) has 2 child nodes: "parent3-child1" (rrn=6) and "parent3-child1" (rrn=8).

  • Node "parent3-child1" (rrn=6) has 1 child node: "parent3-child1-grandchild1" (rrn-7).

  • Node "parent3-child2" (rrn=8) has 1 child node: "parent3-child2-grandchild1" (rrn-9).

  • The expand/collapse icon appears only when a node has any child nodes.