This is the first among the series of articles that I intend to write about the new AdvancedDataGrid control of Flex 3.0 (moxie). You would require Flex 3 beta 1 to compile and run this example. If you dont have moxie yet, download it here

Displaying grouped (hierarchical) data & summary rows in AdvancedDataGrid

One of the key features of the new AdvancedDataGrid (will be referred to as ADG from hereafter) is its inbuilt capablility to display hierarchical data. This is made possible through the new set of collections classes that have been added. The following example helps you learn two things:

  • How to create a grouped data from the flat data that is supplied to ADG
  • Create summary rows based on the data.

Lets now look at the example :)

The example in this article has an ADG which display the quarterly revenue details of companies and the number of licences sold by each one of them stored as an XMLList. This XMLList is supplied as the dataProvider for the ADG. (This is all similar to what you would do in the DataGrid).


Now, Lets try and group this data based on the field quarter. Lets look at the code that will let us do that

//Make a grouping collection
var mygroup:GroupingCollection=new GroupingCollection();
//Set the source to the array collection (this case dataProvider)
mygroup.source = colgrouped_adg.dataProvider;
//Create a new grouping
var group:Grouping = new Grouping();
//Group on Quarter
var gf:GroupingField = new GroupingField(”Quarter”);
//Set the fields to the grouping
group.fields = [gf];
//Finally, Set the group to the grouping property of groupedCollection
mygroup.grouping = group;
//Refresh the group
mygroup.refresh();
//Set the dataProvider to the grouping collection
colgrouped_adg.dataProvider = mygroup
//Call validateNow() to redraw the dg.
colgrouped_adg.validateNow()

The steps are as follows:

  • create a grouping collection
  • set the source to a flat collection (this case the ADG DataProvider)
  • create an instance of grouping
  • create a grouping field and pass the field that you want the data to be grouped on
  • set the fields property of the grouping to the groupField
  • set the grouping property of the grouping collection to grouping instance
  • refresh the grouping collection
  • set the dataProvider of ADG to the grouping collection
  • call validateNow() on ADG to update the display


Now, Lets write some code to calculate the summary of the total number of licences sold by *ALL* companies. Here we go!

var sr:SummaryRow = new SummaryRow();
//Set the summaryObjectFunction
//This function tells ADG to add a summary row in addition to the existing data
sr.summaryObjectFunction = objFunc;
//Set the summary field. The field on which the summary will be calculated.
var sf:SummaryField = new SummaryField(”Licenses”);
//Summary Function – the function that calculates the summary row display
sf.summaryFunction = func;
//set the summary rows fields property to summaryField
sr.fields = [sf];
//Place the summary row (Last means data First, summary Last!)
sr.summaryPlacement = “last”;
//Group on Quarter
var gf:GroupingField = new GroupingField(”Quarter”);
//set the summary row(s) to groupingField
gf.summaries=[sr]

Thats fairly straight forward. Here are the steps you need to follow to get a summary row in your ADG.

  • Create a summary row instance
  • Set the summaryObjectFunction to include a summary in your ADG data
  • Create a summary field, the field on to which the summary calculation formula needs to be applied.
  • Write a summary function which contains the logic to calculate the summary
  • set the summaryField to the fields propety of summary row
  • Define summaryPlacement “First / Last” First will put summary before data, last will add it after the data
  • Finally set the summary rows to the groupingField.

The SummaryObjectFunction looks like this: (This method returns a SummaryObject)

private function objFunc():SummaryObject
{
var obj:SummaryObject = new SummaryObject();
obj.summary = true;
return obj;
}

Finally, the summary function. summaryFunction accepts 3 parameters (its a callback, you may never have to pass params to it, but be sure that you write the signature correctly) an iterator,a field and an operation. (operations include build-in methods like ADD).

private function func(itr:IViewCursor,field:String, str:String=null):Object
{
var sum:Number=0
while(!itr.afterLast)
{
//trace(itr.current)
var value:Number = Number(itr.current.Licenses);
if(!isNaN(value))
{
sum+= value
}
itr.moveNext()
}
return sum
}

Thats it! We are done and what we get will look like this :)

I have included the sample application as well as full source code for this example. Do take a look at it. I hope this one was useful for all those who are exploring the new ADG. Do look out for more tutorials on this topic.

Download Source

Do check out my Simple Gantt chart built on AdvancedDataGrid