Flex 3:Feature Introductions: Advanced DataGrid
From Adobe Labs
AdvancedDataGrid is a new component that builds upon the features of DataGrid and adds many features like multi column sorting interface, cell-level formatting functions, tree view (hierarchical data and grouping data), cell selection, custom rows, column grouping, SummaryCollection and the PrintAdvancedDataGrid.
We’ll dive in with an example to see each of these features in action. You may need to download the samples to follow along.
Let’s say you’re in the mood to plan your next vacation and want to buy a few planets for getaways. You call your local interstellar tour operator and get the following data:
| Planet | Kind | Year duration | Moons | Cost |
|---|---|---|---|---|
| Mercury | Terrestrial | 0.24 | 0 | 1225 |
| Venus | Terrestrial | 0.62 | 0 | 2400 |
| Jupiter | Gas giant | 11.86 | 63 | 500 |
| Neptune | Gas giant | 164.8 | 13 | 3000 |
| Ceres | Ice dwarf | 4.60 | 0 | 4000 |
| Pluto | Ice dwarf | 248.09 | 3 | 4500 |
| Eris | Ice dwarf | 557 | 1 | 3000 |
See sample adg1.
Multi column sorting
You are interested in the cheapest planets available, so click on the header for the ‘Cost column’ and the data will be sorted by that column. Next, you see that you want to further sort by year duration (because shorter the year duration, the shorter the distance from the sun and hence closer to the earth), so hold the ctrl key and click on the ‘Year duration’ header and notice that the data is now sorted by cost and by year duration.
See sample adg2.
Suppose you want a getaway which is far away, then ctrl+click the ‘Year duration’ header again, and notice the order of the sorting for that column change to descending.
You can ctrl+click any number of columns to add them to the sorting sequence. To start a new sorting sequence, release the ctrl key and do a normal click on any header (that you want to sort by).
We can also achieve the same by using the keyboard only. For example,
position the cursor on the first row of the grid and press the up arrow
to move focus to the header, then use left and right arrow keys to
move between the columns and use the space key to “click”
the header and use ctrl+space to “ctrl+click”
the header.
You can also achieve multi column sorting programmatically. The result of clicking on ‘cost’ and ctrl+clicking on ‘year duration’ is demonstrated below.
Tree view
Let’s say you are interested only in terrestrial planets because you prefer to have solid land beneath your feet. It would be better if the data was hierarchically arranged so that we can only drill down according to the kind of planets that we are interested in.
So, provide a dataProvider as shown in adg3 and
you will see a tree view.
We now finally have a component that combines the datagrid and the tree!
Grouped view
Converting from a flat view to a tree view looks like a lot of work to transform the data, doesn’t it? Well, it turns out that there is a better way - by using the grouping feature to automatically convert the flat data into a grouped collection and display the groups in the tree view.
So, all we have to do instead now is to assign a GroupedCollection
to the dataProvider instead of the normal flat data, and voila, we
have a grouped view!
See sample adg4.
Row/column/cell formatting
Suppose you want to highlight all costs that are < 3000 in blue
to visualize which planets are within your budget, then you can add
a styleFunction to achieve this. All you have to do is
to return a list of key:value pairs of the styles that you want to
set on the given cell.
See sample adg5.
The best part is that the you can use any logic that you want with the data provided - you can use regular expressions or check some variables or use some complex business logic to set the formatting.
Cell selection
If you want to select a few planet names and their corresponding costs
and send it across to your friend via email, there is no easy way to
currently do it. However, with the AdvancedDataGrid, you can enable
the cell selection mode, add a keyboard handler to handle the ctrl+c
event to copy the selectedCells to the clipboard.
See sample adg6 and the related components/ClipDataGrid.as.
Notice that you can use the ctrl+arrow keys to move the caret and press the space key to select cells or you can ctrl+click on the individual cells to select them via the mouse instead.
Custom rows
Let’s say you’re interested in just buying all the terrestrial planets or maybe even the ice dwarves and you wanted to see the total cost in each group. That’s where custom rows appears in the picture.
See sample adg7 and the related SummaryRenderer.mxml.
Notice that we can display the summary in an entire row by itself (i.e. column spanning).
Summary Collection
Oh, if only we could have the total cost calculated automatically instead of doing the work ourselves… well, if you are using grouping to display the data, then you can use a SummaryCollection to do just that.
See adg8 and related SummaryRenderer.mxml.
Column Grouping
Suppose you wanted to visualize the data in a more organized fashion, say we have three columns - planet, details and cost. The details column is further sub-divided into three columns - kind, year duration, and number of moons… we can now achieve this using the column grouping feature.
See sample adg9.
Printing the AdvancedDataGrid
The AdvancedDataGrid provides many ways of visualizing the data to make it easy for you to extract the useful information from the data. Some people prefer the hardcopy way of thinking about things, so we support that too. You can hook up the data to a “PrintAdvancedDataGrid” and then take a printout.
See sample adg10.
Summary
This is a brief overview of the features of AdvancedDataGrid. Please dive into the ASDocs to get to know about each of these features in detail.
AdvancedDataGrid was the result of feedback from various customers. We would like to hear from you regarding what things you would like to see improve such as the user interface, the API and any other concerns that you would like to see us address. We look forward to your feedback.
Known Issues
- FLEXDMV-855 ADG goes blank on horizontal scrolling after setting lockedColumnCount and lockedRowCount at runtime
- FLEXDMV-854 RTE when doing keyboard navigation in a grouped ADG with horizontalScrollPolicy set to on
- FLEXDMV-853 RTE when inserting lockedColumnCount at runtime after horizontalscrolling
- FLEXDMV-852 RTE when doing keyboard navigation using the ENTER key when lockedRowCount is incremented
- FLEXDMV-848 Dragging a newly added column throws a RTE on grouping columns
- FLEXDMV-843 Player crash on navigation using ENTER key with grouped ADG and variableRowHeight turned on
- FLEXDMV-842 Adding many column groups and then inserting columns at runtime makes the player hang
- FLEXDMV-840 expandAll() not functioning on setting HierarchialData. To make this functional ase adg.validateNow() after setting the dataProvider
- FLEXDMV-784 Drag and drop non functional when selectionMode="multipleCells"
- FLEXDMV-781 Keyboard navigation of column headers is only at the highest level of the grouping.
- FLEXDMV-778 New Flex SDK components do not show up in components panel
- FLEXDMV-774 After hiding a column group, cell selection selects incorrect cell
- FLEXDMV-920 Deleting an item in the source collection does not cause removal in the GroupingCollection
