There were some concerns over the performance of GroupingCollection class while grouping and calculating summaries.

So, a new class GroupingCollection2 is introduced in the data visualization components.

The major improvements in GroupingCollection2 are -
1. Grouping performance improved.
2. Summary calculation performance improved. Now, instead of looping over the data again and again, summaries are calculated in a single loop.
3. When using async refresh, the summaries are calculated as soon as each Group is built. Earlier, the summaries were calculated only after all the Groups have been made.

What has changed -
1. Introduced class GroupingCollection2 which replaces existing class GroupingCollection.
2. Introduced class SummaryField2 which replaces existing class SummaryField.

No no, classes GroupingCollection and SummaryField are not removed.
They will continue to exist to maintain backward compatibility.
So, you can use either GroupingCollection or GroupingCollection2 and AdvancedDataGrid will continue to work

The difference between SummaryField and SummaryField2 is -
SummaryField2 does not have “operation” and “summaryFunction” properties.
A new property “summaryOperation” in added in SummaryField2. It is an Object which takes one of the following -
* SUM, MIN, MAX, AVG or COUNT as String.
OR
* An implemtatation of mx.collections.ISummaryCalculator for calculating custom summaries.
The default value is SUM.

API changes -
1. Method refresh() has been changed in GroupingCollection2. The syntax now is –

function refresh(async:Boolean = false,
		dispatchCollectionEvents:Boolean = false):Boolean;

Code changes required to start using GroupingCollection2 -
1. Use GroupingCollection2 instead of GroupingCollection.
2. Use SummaryField2 instead of SummaryField.
3. Replace operation/summaryFunction in SummaryField with summaryOperation in SummaryField2.

An example is shown here:
With GroupingCollection –

<mx:GroupingCollection id="gc" source="{arr}">
	<mx:Grouping>
		<mx:GroupingField name="name" >
			<mx:SummaryRow>
				<mx:SummaryField dataField="sal"
					operation="MAX" />
			</mx:SummaryRow>
		</mx:GroupingField>
	</mx:Grouping>
</mx:GroupingCollection>

With GroupingCollection2 –

<mx:GroupingCollection2 id="gc" source="{arr}">
	<mx:Grouping>
		<mx:GroupingField name="name">
			<mx:SummaryRow >
				<mx:SummaryField2 dataField="sal"
					summaryOperation="MAX" />
			</mx:SummaryRow>
		</mx:GroupingField>
	</mx:Grouping>
</mx:GroupingCollection2>

Try it and let us know your feedback.

Consider a scenario in which you want to group some data and display it in an AdvancedDataGrid. Now, you open some nodes. And you want to add summaries to the data. Adding summaries means to re-group the data by calling GroupingCollection.refresh(). But the state of open nodes will be lost as new Objects are created for the group nodes while re-grouping.

I’m posting a sample in which the open nodes are preserved.

Sample here.

Source here.

Open the sample, click on Group data, open some nodes and then click on Add Summary. The nodes which are open will remain open.

Basically, here I’m giving the same UID for the group nodes as they were before (re-grouping). That’s why, the open state is maintained.

Note: This sample will work only if the grouping fields are same for both groupings. It’ll need some tweaking in case the grouping fields are changed.

Usually people like to write the AdvancedDataGrid component in mxml. But there are some scenarios where there is a need to create the grid dynamically.

Here is a simple sample in which an AdvancedDataGrid is created dynamically with column groups.

Source is posted here.

When you set Object/Collection as a source for an AdvancedDataGrid to display the source in a Hierarchical manner, the AdvancedDataGrid.dataProvider will return an instance of IHierarchicalCollectionView because internally the source is used to construct a HierarchicalCollectionView which is returned via the dataProvider property.

What if, you want the original source from this IHierarchicalCollectionView. Well, there are some API’s for achieving this -


// First, get the HierarchicalData used to create the HierarchicalCollection
var hd:IHierarchicalData = IHierarchicalCollectionView(adg.dataProvider).source;



//From the HierarchicalData, get the source collection/object
var source:Object = hd.getRoot();


Here is a sample.
Source here.

There is a post in Flex component Yahoo group on how to show a 3-state checkbox in an AdvancedDataGrid.

It has been implemented for the Flex Tree Control in the Flex cookbook.

I thought lets write a similar example for AdvancedDataGrid. I made some changes in the original sample and here it is; working for the AdvancedDataGrid control.

Example here

Source here

This example shows how AdvancedDataGrid can be configured to show summary with the Group node.

Here, I’m using GroupingCollection to calculate the Summary with summaryPlacement being “group”. Then using groupLabelFunction in AdvancedDataGrid and returning the Group Node’s value plus the Summary value.

Source mxml is located here.

The GroupLabel specified while creating a GroupingCollection can be accessed while displaying summaries in AdvancedDataGrid.

Although, accessing the GroupLabel in summary rows can be quite a tedious task but it can be very useful.

Here is a sample. In this sample, the Group name is displayed in the summary rows along with the value for the summary.

Source -

• Application file (mxml)
• SummarRenderer (mxml)

Filtering of Hierarchical Data in AdvancedDataGrid is quite straight forward.

Assign the filter function to the ADG’s dataProvider and call refresh() -

// assign filter function to
//the AdvancedDataGrid's dataProvider
IHierarchicalCollectionView(
        adg.dataProvider).filterFunction =
                                 myFilterFunc;

// refresh the ADG's dataProvider
IHierarchicalCollectionView(
        adg.dataProvider).refresh();

Here is a Sample

And the Source

I’ve written a small application showing how auto filtering can be used in an AdvancedDataGrid.

In the sample, the first two headers are TextInput control which are used as input for the text.

I’ve written a custom itemRenderer using TextInput. On the change event of the TextInput, filtering is applied to the dataProvider and the result is shown by the AdvancedDataGrid.

The sample is located here

Source code – The main application file, The itemRenderer

Also, the sample can be modified to create an Advanced Filtering mechanism.

I like the auto-re sizable functionality of the columns in most of the grids.

Common applications include Windows Explorer and File Browser in Ubuntu.

So, I decided to write my own in AdvancedDataGrid.

Here, double-clicking the separator between the headers will resize the corresponding column to fit in the contents.

Check out the sample here
Try clicking the header separator between ‘Subject’ and ‘Date’ column. This will resize the ‘Subject’ column to adjust to the
data it is showing.

Source code here -
Application .mxml file
Resizable ADG .as file