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

Flex AdvancedDataGrid – Utiliser treeColumn pour définir la colonne qui va contenir le Tree

Le composant AdvancedDataGrid est parfois appelé "Tree Datagrid" car une colonne peut être réservée pour un Tree qui va déterminer quelles lignes seront visibles. Le plus souvent, l'arbre apparait dans la colonne la plus à gauche, où la première colonne du composant est associée avec un champ du dataProvider du composant.

Cependant, vous pouvez spécifier dans quelle colonne sera affiché le Tree avec la propriété treeColumn du composant AdvancedDataGrid. Il suffit de lui donner une référence vers une AdvancedDataGridColumn.

Voici un exemple qui place le Tree sur la deuxième colonne:

<?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;
		[Bindable]
		private var dpHierarchy:ArrayCollection = new ArrayCollection([
			{Region:"Southwest", children: [
			{Region:"Arizona", children: [
			{Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000},
			{Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},
			{Region:"Central California", children: [
			{Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},
			{Region:"Nevada", children: [
			{Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},
			{Region:"Northern California", children: [
			{Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000},
			{Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},
			{Region:"Southern California", children: [
			{Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000},
			{Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
			]}
		]);
	]]>
	</mx:Script>
	<mx:AdvancedDataGrid
	width="100%" height="100%"
	treeColumn="{rep}">
		<mx:dataProvider>
			<mx:HierarchicalData source="{dpHierarchy}"
			childrenField="children"/>
		</mx:dataProvider>
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="Region"/>
			<mx:AdvancedDataGridColumn id="rep"
			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