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

Flex AdvancedDataGrid – Agrégation de plusieurs colonnes

Dans le tuto Flex précédent, je montrais un exemple simple de regroupement de 2 colonnes en MXML. La propriété "groupedColumns" peut contenir des instances de AdvancedDataGridColumn et de AdvancedDataGridColumnGroup.

Les instances de AdvancedDataGridColumn apparaissent dans le composant comme des colonnes seules. Toutes les colonnes spécifiées dans une instance de AdvancedDataGridColumnGroup apparaissent ensemble dans une même colonne.

Vous pouvez ajouter de multiples groupes dans un composant AdvancedDataGrid. L'exemple suivant crée 2 groupes de colonnes:

<?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:AdvancedDataGridColumnGroup headerText="Area">
				<mx:AdvancedDataGridColumn dataField="Region"/>
				<mx:AdvancedDataGridColumn dataField="Territory"/>
			</mx:AdvancedDataGridColumnGroup>
			<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

Groupes de groupes de colonnes...

Vous pouvez aussi regrouper des colonnes sur plusieurs niveaux. L'exemple suivant fait regroupe dans une colonne deux AdvancedDataGridColumnGroup:

<?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="Territory_Rep"
				headerText="Territory Rep"/>
			<mx:AdvancedDataGridColumnGroup headerText="All Groups">
				<mx:AdvancedDataGridColumnGroup headerText="Area">
					<mx:AdvancedDataGridColumn dataField="Region"/>
					<mx:AdvancedDataGridColumn dataField="Territory"/>
				</mx:AdvancedDataGridColumnGroup>
				<mx:AdvancedDataGridColumnGroup headerText="Revenues">
					<mx:AdvancedDataGridColumn dataField="Actual"/>
					<mx:AdvancedDataGridColumn dataField="Estimate"/>
				</mx:AdvancedDataGridColumnGroup>
			</mx:AdvancedDataGridColumnGroup>
		</mx:groupedColumns>
	</mx:AdvancedDataGrid>
</mx:Application>

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