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

Flex AdvancedDataGrid – Sélection de multiples lignes et cellules (row / cell)

Tous les composants de type List ont une propriété allowMultipleSelection. Si on la passe à true, elle permet de sélectionner plus d'un élément dans le composant. Par exemple, le composant DataGrid vous permet de sélectionner plusieurs lignes pour pouvoir les glisser-déplacer vers un autre composant DataGrid.

Le composant AdvancedDataGrid ajoute la possibilité de sélectionner plusieurs cellules. Vous pourrez ensuite les drag and drop vers un autre composant ADG, les copier vers le presse-papier ou toute autre action de votre choix.

Pour cela, vous devez utiliser la propriété "selectionMode" du composant AdvancedDataGrid, ainsi que la propriété allowMultipleSelection pour configurer la sélection multiple. La valeur par défaut de "selectionMode" est "singleRow", ce qui signifie que vous ne pouvez sélectionner qu'une ligne à la fois. Il y a 5 valeurs disponibles:

• none (aucune sélection autorisée)
• singleRow
• singleCell
• multipleRows
• multipleCells

Sélectionner des objets contigus dans une ADG

1. Cliquez sur le premier élément (ligne ou cellule) pour le sélectionner
2. Laissez enfoncé Shift quand vous sélectionnez des éléments supplémentaires

• Si la propriété selectionMode est à multipleRows, cliquez sur n'importe quelle cellule d'une autre ligne pour sélectionner plusieurs lignes
• Si la propriété selectionMode est à multipleCells, cliquez sur n'importe quelle cellule pour sélectionner les cellules contigües

Sélectionner des objets discontigus dans une ADG

1. Cliquez sur le premier élément (ligne ou cellule) pour le sélectionner
2. Laissez enfoncé Ctrl quand vous sélectionnez des éléments supplémentaires

• Si la propriété selectionMode est à multipleRows, cliquez sur n'importe quelle  autre ligne pour la sélectionner
• Si la propriété selectionMode est à multipleCells, cliquez sur n'importe quelle cellule pour la sélectionner

Au fur et à mesure que vous sélectionnez des cellules ou des lignes dans un composant AdvancedDataGrid, le composant met à jour la propriété 'selectedCells" avec les informations concernant votre sélection. La propriété selectedCells est un tableau (Array) d'objets (Object) dans lequel chaque Object contient une propriété "rowIndex" et "columnIndex" qui représente l'emplacement de la ligne/cellule sélectionnée dans le composant.

Si uniquement des lignes (rows) sont sélectionnés, les propriétés de chaque objet "columnIndex" ont la valeur -1.

Voici un petit exemple qui va vous permettre de manipuler cette propriété (faites votre choix en haut):

<?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;
		include "StyleData.as"
	]]>
	</mx:Script>
	<mx:ApplicationControlBar dock="true">
		<mx:Label text="Mode de sélection"/><mx:ComboBox id="selectionModeCB">
			<mx:dataProvider>
				<mx:String>none</mx:String>
				<mx:String>singleRow</mx:String>
				<mx:String>singleCell</mx:String>
				<mx:String>multipleRows</mx:String>
				<mx:String>multipleCells</mx:String>
			</mx:dataProvider>
		</mx:ComboBox>
	</mx:ApplicationControlBar>

	<mx:AdvancedDataGrid id="myADG"
		width="100%" height="100%"
		dataProvider="{dpADG}"
		selectionMode="{selectionModeCB.selectedItem.toString()}">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Artist"/>
			<mx:AdvancedDataGridColumn dataField="Album"/>
			<mx:AdvancedDataGridColumn dataField="Price"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

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