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
"...".