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

Flex AdvancedDataGrid – Regrouper des colonnes en MXML

Dans une AdvancedDataGrid, vous pouvez regrouper plusieurs colonnes sous une même en-tête en utilisant des groupes de colonnes.

Dans l'exemple que l'on va voir, on utilise de la donnée à plat (pas de Grouping de la data), et on regroupe les colonnes Actual et Estimate sous une même colonne nommée Revenues.

Pour grouper des colonnes dans un composant AdvancedDataGrid, vous devez:

• Utiliser la propriété "groupedColumns" de l'AdvancedDataGrid au lieu de la propriété "columns" pour spécifier les colonnes
• Utiliser la classe AdvancedDataGridGroup pour spécifier les groupes de colonne.

Voici un exemple de regroupement de colonne dans une AdvancedDataGrid en MXML:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		// Import the data used by the AdvancedDataGrid control.
		include "SimpleFlatData.as";
	]]>
	</mx:Script>

	<mx:AdvancedDataGrid id="myADG"
		dataProvider="{dpFlat}"
		width="100%" height="100%">
		<mx:groupedColumns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn dataField="Territory"/>
			<mx:AdvancedDataGridColumn dataField="Territory_Rep"
				headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumnGroup headerText="Revenues">
				<mx:AdvancedDataGridColumn dataField="Actual"/>
				<mx:AdvancedDataGridColumn dataField="Estimate"/>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
</mx:Application>

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