/
Grid Tree

Grid Tree

  • Verified

    • This functionality is available starting with Profound UI Version 6, Fix Pack 14.0.

    Overview

    Profound UI offers grid properties that allow you to present grid data in a tree: tree level field and tree level column. This page documents an example of this Grid Tree feature.

    Note: Some grid properties - such as Sorting - cannot be used by grids that utilize the grid tree.

     

    Files

    Attached below are the DSPF and SQLRPGLE source members for this example:

    Table of Contents

    Example/Steps

    This example assumes you have a 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 can display the data in a Grid in a "flat" format, with one row per record. Or, you can 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.

      • 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. The data in this field (i.e., level = 1,2,3,...) is used to render the grid in a "tree" format.

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

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

    At this point in the example, 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 first 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:

    DocPic1.png
    DocPic2.png

    Whereas clicking on the "-" icon (collapse) on the second 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:

    DocPic3.png
    DocPic4.png

    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, etc.

    • In the 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 example below, the grid does not include that column. When you bind the "tree level field" property 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 example below, the "tree level column" property is set to "0", which indicates that the first column should contain the expand/collapse icons. In general, you should specify the "tree level column" property to be whatever column makes the most sense for the grid data, in regards to having the expand/collapse icons.

    Initial Collapsed Mode

    This option is available starting in Profound UI Version 6, Fix Pack 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" property for 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 immediate previous grid row).

    Below is an example of a "family tree", which illustrates 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.