This Example demonstrates the most important feature of Flexicious Ultimate, its support for hierarchical data.

 

The MXML defines 4 levels, including the top level via the columnLevel property of the datagrid, as well as the nextLevel properties of the individual column levels. You will notice that enableFilters, enablePaging and enableFooters can be defined on each level. This gives you the Flexibility to have headers, footers, paging and filters at each level. Columns are also defined at each level. So each level can have an independent set of columns. There is a way to implement a Grouped structure as well (by using "reusePreviousLevelColumns"=true), which we also refer to as Homogenous Hierarchical Data. This means that we’re displaying properties of a single entity, just grouped along some attributes of that entity. See the Grouped Data Examples for this. In this example however, we’re only focusing on Heterogeneous Hierarchical Data, or Nested Data, where we display related, but separate Business entities (usually parent child entities) in a nested hierarchical UI.

 

Let’s examine the markup: The most obvious is the columnLevel property. Here we define the root columnLevel. This contains a set of columns, as well as a inner nextLevel, which has its own set of columns.

 

There are a few properties specific to nested structures that we will explain:

1)      One the grid

·         enableDrillDown: Flag to control appearance of the drill in and drill out icons in the toolbar. If true, shows a pair of zoom in and zoom out icons for the user to expand to a higher or lower level as well as an icon to expand all as well as collapse all items.

·         enableSelectionCascade: Flag to cascade checkbox or row selection down from the selection level.

2)      On the levels:

·         childrenField: The property of the parent level object, that identifies the children that should be displayed on the next level. This is only required if the collection is not a hierarchical view. Please note, in server mode, this property is also the "storage" for the lazy loaded children. See the Partially and Lazy Loaded Server Grid examples for more details

·         selectedKeyField: A property on the object that identifies the object uniquely. Similar to a surrogate key, or a business key, as long as it uniquely identifies the object. When this property is set, the selectedKeys returns the ID values of the objects that were selected. When a row is selected in the grid, we store the selectedKeyField property of the selected object in this array collection. This allows for multiple pages of data that comes down from the server and not maintained in memory to still keep track of the ids that were selected on other pages.  

3)      On the columns:

·         columnWidthMode: Specifies how the column widths are applied. Defaults to fixed. This means that the width of the column will be fixed to the size specified in the width property. If this property is set to fitContent, the grid identifies the longest string to be displayed in this column, and sets the width of the column to this value.  this is set to percent, the grid divides the remaining width after allocating all fixedWidth and fitToContent columns, on a percentage basis among all columns that have columnWidthMode set to percent. PLEASE NOTE : If you set columnWidthMode='percent', also set percentWidth. Also, left and right locked columns do not support column width mode, it is ignored for these. Values : none,fixed,percent,fitToContent

·         enableCellClickRowSelect: Flag to enable selection of a row when a cell within that row is clicked. You may choose to set this to false when you set selectable =true. When the user clicks on a cell, the row is automatically selected when the selection mode is either single row or multiple rows. When you have cells that are selectable, the user may wish to select the text in the cell as opposed to selecting the row. Setting this flag to false will disable the row selection when any cell within this column is clicked.

·         selectable: A flag that indicates whether the items in the column are selectable.

·         truncateToFit: If this propery is true, the text that does not fit in the available size is truncated with "...".