Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex AdvancedDataGrid – Grouping en ActionScript avec GroupingCollection

Dans les tutos flex précédents, on a toujours réalisé notre regroupement de data en MXML. Cependant, vous pourriez très bien laissé l'utilisateur définir le regroupement à l'exécution. Pour lui laisser cette possibilité, il faut effectuer le Grouping à la volée, en AS3.
On suit ici le même cheminement qu'en MXML. On crée deux objets GroupingField auxquels on passe le nom du champ à grouper dans le constructeur. On affecte ces deux objets à la propriété "fields" d'une instance de Grouping et on affecte cette instance de Grouping à la propriété "grouping" d'une instance de GroupingCollection.
On donne ensuite cette instance de GroupingCollection comme dataProvider de l'AdvancedDataGrid et on fait un refresh() pour mettre la donnée à jour visuellement.
L'exemple suivant crée des groupes en ActionScript à la création de l'AdvancedDataGrid:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.collections.GroupingField;
		import mx.collections.Grouping;
		import mx.collections.GroupingCollection;
		import mx.collections.ArrayCollection;
		include "SimpleFlatData.as";

		[Bindable]
		public var myGColl:GroupingCollection = new GroupingCollection();
		private var myGrp:Grouping = new Grouping();
		private function initDG():void {
			// Initialize the GroupingCollection instance.
			myGColl.source = dpFlat;
			// The Grouping instance defines the grouping fields
			// in the collection, and the order of the groups
			// in the hierarchy.
			myGrp.fields =
			[new GroupingField("Region"), new GroupingField("Territory")];
			// The grouping property contains a Grouping instance.
			myGColl.grouping = myGrp;
			// Specify the GroupedCollection as the data provider for
			// the AdvancedDataGrid control.
			myADG.dataProvider=myGColl;
			// Refresh the display.
			myGColl.refresh();
		}
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		creationComplete="initDG();">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
				headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumn dataField="Actual"/>
			<mx:AdvancedDataGridColumn dataField="Estimate"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application