Generating summary for flat data using GroupingCollection

This example shows how GroupingCollection can be used to generate summary data for flat data and AdvancedDataGrid can be used to display the result.

The trick (or dirty work around if you like to call it so) is to generate a single dummy group using a invalid grouping field. The summary we require is specified as usual using the SummaryRow and SummaryField.

When this GroupingCollection is fed to ADG.dataProvider it would try to display in a tree view. By setting the HierarchicalCollectionView.showRoot flag to false to avoid displaying the single group parent.

By specifying the default ADGItemRenderer as ADG.groupItemRenderer we can prevent the group icons from getting displayed.

The source is here.

Please note I have not tested this example extensively. So some bug fixes may be required before it can be used in production.

Customizing Group label fields when using GroupingCollection

By using the ADG.groupLabelFunction property one can customize the group label displayed for the group nodes. The following example shows how children count can be displayed as part of the group label when the group is closed. The source can be found here.

Poll for current and new features in AdvancedDataGrid

I created three polls at the end of my blog. One to know how users are feelling about ADG in its current form, second what features of ADG in Flex 3 users are liking the most and third one to see what new features users would like to see in the next version of AdvancedDataGrid to make it more useful.

Who knows you may be able to guide the future developement of ADG !

Thanks in advance for giving your opinion!

If you want to see more choices do leave a comment. I would add it.

Async refresh of GroupingCollection

In Flex 3 Beta-2, GroupingCollection adds support for asychronous refresh. When we have large number of input rows or don't want to wait for the grouping to finish to see the results we can pass true to GroupingCollection.refresh(async:Boolean) and get to view the results as the grouped data is built. Users are allowed to interact with the shown information. Refresh can be even stopped by calling cancelRefresh.

I wrote a small app to test this. The app generates random data and displays it in AdvancedDataGrid(ADG) when "Populate ADG" is clicked. The number of data rows can be modified using the numeric stepper. A click on "Group" starts async refresh and ADG starts displaying the results immediately. Grouping can be cancelled any time using "Cancel Grouping". The three check boxes allow different combinations of grouping to be performed.

Option to pause/resume a refresh is not available.

The source is available here.

Displaying charts in AdvancedDataGrid

Using charts as itemRenderers in DG and ADG is easy. Find the sample files here The sample uses a LineChart as itemRenderer for the third column and a PieChart in the child area. The column-spanning option available through RendererProviders is used to make the PieChart occupy the whole row. The sample shows use of HierarchicalData but even without that All chart types can be used as itemRenderes.

AdvancedDataGrid Multi level Column Grouping

AdvancedDataGrid supports column grouping. An example showing multiple level grouping is shown below. Here is the mxml file.

Customizing headers in DG/ADG

Customizing headers in DataGrid and AdvancedDataGrid (DG/ADG) is very easy. Just point the headerStyleName property available on these controls to any style declaration you want. The following image shows one such example where the header text is colored in blue and red. The second column text is center aligned. The important thing to notice here is that the headers are now styled differently than the column content. If the same styles were set on the column objects then the header as well as column content would have got same styles. headerStyleName allows customizing only the headers. The headerStyleName is available on the control and the column object. Hence you can set the control.headerStyleName to customize all the headers and use the column.headerStyleName to customize individual headers. A sample mxml file.