Adobe Flex Tutorial - Adobe Flex Tutorial

1nov/0819

Flex DataGrid – Peupler une DataGrid avec un dataProvider et des DataGridColumn

Les DataGrix Flex héritent des listes standard, c'est pourquoi elles fonctionnent de la même manière. Cependant, puisqu'une DataGrid est plus complexe qu'une liste de base, elle a certains comportements qui lui sont spécifiques.

Utilisation des DataProvider avec une DataGrid

Les data providers des DataGrid sont assez similaires aux data providers de base, sauf que chaque élément du dataProvider d'un DataGrid doit être un objet dont les propriétés correspondent aux colonnes de la data grid.
L'exemple suivant crée une DataGrid en MXML avec des colonnes nommées city, state et population:

<mx:DataGrid>
	<mx:ArrayCollection>
		<mx:Array>
			<mx:Object city="Los Angeles" state="CA" population="343943"/>
			<mx:Object city="New York" state="NY" population="33444667"/>
			<mx:Object city="Chicago" state="IL" population="343211245"/>
			<mx:Object city="Philadelphia" state="PA" population="98976876"/>
		</mx:Array>
	</mx:ArrayCollection>
</mx:DataGrid>

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

This movie requires Flash Player 11

Vous pouvez bien sur obtenir le même résultat en utilisant de l'ActionScript pour créer une DataGrid Flex. Voici un exemple qui affiche le même contenu en ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler(event)">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			private function creationCompleteHandler(event:Event):void{
				var array:Array = new Array(
				{city:"Los Angeles", state:"CA", population:343943},
				{city:"New York", state:"NY", population:33444667},
				{city:"Chicago", state:"IL", population:343211245},
				{city:"Philadelphia", state:"PA", population:98976876}
				);
				var collection:ArrayCollection = new ArrayCollection(array);
				grid.dataProvider = collection;
			}
		]]>
	</mx:Script>
	<mx:DataGrid id="grid"/>
</mx:Application>

Utilisation des DataGridColumn

Par défaut dans Flex, les DataGrid affichent automatiquement des colonnes correspondant aux propriétés des éléments du dataProvider. Le code de l'exemple précédent crée une DataGrid avec trois colonnes avec comme en-tête city, state et population. Bien que cela puisse être le comportement souhaité, dans la plupart des cas il est trop instable. C'est pourquoi il est possible de contrôler explicitement les colonnes d'une DataGrid grâce aux objets DataGridColumn.

Vous pouvez spécifier quelles colonnes vont être affichées dans la DataGrid en utilisant la propriété columns d'une DataGrid. Vous devez passer à la propriété columns, un tableau d'objets DataGridColumn. En utilisant ces objets colonnes, vous pouvez filtrer quelles colonnes seront affichées, les largeurs des colonnes et bien plus. Il suffit d'indiquer la propriété du dataProvider visée ("city" par exemple) grâce à dataField et d'indiquer la tête de colonne avec la propriété headerText de DataGridColumn. Voici un exemple qui affiche les valeurs de population et de city avec des labels personnalisés, mais n'affiche pas la donnée state:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:DataGrid width="500">
		<mx:columns>
			<mx:DataGridColumn headerText="Ville" dataField="city"/>
			<mx:DataGridColumn headerText="Population de la ville" dataField="population"/>
		</mx:columns>
		<mx:ArrayCollection>
			<mx:Array>
				<mx:Object city="Los Angeles" state="CA" population="343943"/>
				<mx:Object city="New York" state="NY" population="33444667"/>
				<mx:Object city="Chicago" state="IL" population="343211245"/>
				<mx:Object city="Philadelphia" state="PA" population="98976876"/>
			</mx:Array>
		</mx:ArrayCollection>
	</mx:DataGrid>
</mx:Application>

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

This movie requires Flash Player 11

Remplis sous: ActionScript, DataGrid, Exemple, MXML || Taggé comme: ArrayCollection, columns, dataField, DataGrid, DataGridColumn, headerText Laisser un commentaire

Articles similaires

Commentaires (19) Trackbacks (0) (Souscrire aux commentaires de cet article)

Denis
13 novembre 2008

Ce cours est toujours aussi excellent.
Pons Olivier
10 mai 2009

Bonjour,

Si l'on veut mettre du graphisme dans une colonne par exemple un feu rouge ou un feu vert, comment faire ?
fnicollet
10 mai 2009

Pour cela, il faut utiliser un itemRenderer:
http://www.flex-tutorial.fr/2009/03/02/flex-item-renderer-item-renderer-utilisant-des-composants-personnalises-mxml-component/

Fabien
Robertus
28 octobre 2009

Un attribut très pratique : headerWordWrap.
Il permet de faire des retours à la ligne automatique lorsque le texte de l'en-tête est trop long (au lieu de le tronquer).

J'ai réussi à avoir un rendu similaire avec un headerRenderer="mx.controls.Text", mais le curseur change au survol (curseur de sélection de texte) et le texte devient sélectionnable (ça demande un peu de bidouille donc). itemRenderer="mx.controls.Text" fonctionne aussi très bien.
Indiana
18 juin 2010

Bonjour,

Ma question est très simple. J'ai une datagrid peuplé à l'aide d'un dataProvider relié à une base de donnée en php (effectué grâce à la commande "create application from database" de Flex Builder 3).

Comment puis-je accéder aux données de ma datagrid, individuellement? Pour un tableau il suffit de faire tab[i] (du moins en C ou java), mais en flex/AS3 je ne sais pas.

Tout ce que je sais, c'est accéder aux données grâce à un clickEvent tel que: dataGrid.selectedItem.maColonne

J'ai, entre autre, besoin de créer une fonction rechercher selon plusieurs paramêtres (checkbox à cocher)

Merci

Indiana
fnicollet
18 juin 2010

Salut Indiana,
je n'ai jamais testé les assistants de Flex Builder 3 mais ils ont du créer une variable (probablement un ArrayCollection) qui est assigné à la propriété "dataProvider" de ta DataGrid. Cette variable va contenir toutes les données de ton tableau, tu peux boucler dessus avec les boucles for ou for each en ActionScript. Pour récupérer un élément d'une ArrayCollection, il te suffit de faire monArrayCollection.getItemAt(i), tu obtiendras ton objet correspondant à une ligne de ton tableau. Sur cet objet, tu peux récupérer les propriétés issues de ta base PHP (les valeurs des colonnes de ta base.
Peut-être ce tutorial écrit par un utilisateur peut t'aider:
http://www.flex-tutorial.fr/2009/08/12/flex-datagrid-selection-de-lignes-dans-un-datagrid-avec-des-checkbox/

Bonne chance
Fabien
Indiana
21 juin 2010

Bonjour,

Je n'y arrive pas.

Ce que j'essaie de faire, peut être peut-on faire autrement, c'est de lancer une recherche selon plusieurs paramètres (qui sont représentés par des checkbox, non présent dans la datagrid) pour pouvoir afficher une nouvelle datagrid avec les objets correspondants aux paramètres.

exemple: on cherche tous les médicaments contenant du paracétamol, pour enfants de moins de 7 ans, contre indiqué pour les femmes enceintes... et ma datagrid se rafraîchit selon ces paramètres.

Si je comprend bien, ma datagrid serait une matrice à deux dimensions. Donc la syntaxe:

COPIER-COLLER
Actionscript:
dataArr.getItemAt(1,4).toString()
où dataArr est le dataProvider de ma dataGrid

devrait me donner la valeur en string de l'élément se situant en place (1,4) (comme un tableau).

Or lorsque pour le tester en assignant cette valeur à un label, je remarque que ce dernier m'affiche [object, object]...

Pour faire ce qui est expliqué plus haut, je veux tester à l'aide d'une boucle for tous les éléments pour recréer de nouvelles colonnes, donc une nouvelle datagrid, avec les éléments correspondant aux critères de recherches.

Mais peut-être vais-je dans une mauvaise direction?
Merci,

Indiana
Indiana
21 juin 2010

J'ai trouvé comment accéder à chaque donnée de ma dataGrid. Je met la syntaxe pour ceux qui en auraient besoin. Je pense voir plus clair dans ce que je dois faire. Mais j'accepte toute propositions si on peut faire mieux!

COPIER-COLLER
Actionscript:
MyDataGrid.dataProvider.getItemAt(i).MyDataField
où :
-MyDataGrid est ma datagrid
-dataProvider à laissé comme ça (on appelle le dataProvider de ma dataGrid)
-i un int, la ligne que l'on souhaite accéder
-MyDatField, le datafield, autrement dit la colonne, que je souhaite accéder

Indiana
fnicollet
21 juin 2010

Oui, tu peuX faire comme cela. La solution que je te donnais, avec les objets typés te permettent d'avoir l'auto-complétion sur les propriétés et leur type. Avec ta technique, cela va fonctionner mais tu va toujours récupérer un Object.
Fabien
Indiana
24 juin 2010

Bonjour,

Me revoila encore pour un problème de syntaxe, et toujours concernant la même chose,à savoir trier une datagrid selon plusieurs paramètres, afin d'en remplir une nouvelle.

Donc j'ai mon premier dataProvider: dataGrid.dataProvider
et mon deuxième dataProvider: dataArr2
une colonne de dataGrid: OCCol

voici mon code:

COPIER-COLLER
Actionscript:
if(dataGrid.dataProvider.getItemAt(i).OSCol == "1")

{

dataArr2.addItem();

}
Je teste la valeur situé en ième ligne de ma colonne OSCol, et si elle est égale à 1, je veux mettre cet objet correspondant dans mon second dataProvider dataArr2.

Que mettre à l'intérieur des parenthèses de addItem? Comment coder ce que je désire faire?
Merci,

Indiana
fnicollet
25 juin 2010

Salut,
ce ne serai pas plus simple de copier la liste originale puis de trier la seconde ? ^^
Bon sinon, pour ton code, il suffit que tu garde l'item parcouru (getItemAt(i) et que tu fasses un addItem de cet objet. En gros:

COPIER-COLLER
Actionscript:
var dp:ArrayCollection = dataGrid.dataProvider as ArrayCollection;

if (dp && dp.length> 0){

for each (var item:Object in dp){

if (item.OSCol == "1"){

dataArr2.addItem(item);

}

}

}
Fabien
Indiana
25 juin 2010

Bonjour,

Merci beaucoup Fabien, tu m'as vraiment beaucoup aidé!
Très bon site au passage, j'y passe beaucoup de temps.
A bientôt,

Indiana
Eddoh
5 mai 2011

Bonjour, je réalise un projet sous flex ou je dois afficher des stocks de produits . Chaque produit possède un stock limite . L'affichage de la liste des produits et de leur stock se fait à parti d'un datagrid et je voudrais que tous les produits dont le stock est inférieur au stock limite puissent apparaitre en rouge. Est ce que quelqu'un peut me dire comment procéder ?
Aussi je cherche des tutos (autres que ceux proposés par la doc officielle de flex) sur la classe mx.printing de flex. Merci d'avance .
fnicollet
5 mai 2011

Bonjour Eddoh,
Pour la première question, il faut utiliser les itemRenderer. Quelques articles pour t'aiguiller:
http://www.flex-tutorial.fr/2009/03/16/flex-item-renderer-creer-un-itemrenderer-externe-mxml-et-actionscript/
http://www.flex-tutorial.fr/2009/03/23/flex-item-renderer-communication-entre-un-itemrenderer-et-lapplication/
http://www.flex-tutorial.fr/2009/02/24/flex-item-renderer-item-renderer-utilisant-des-composants-personnalises-mxml-inline/

Pour le Print, je n'ai pas grand chose en stock, le mieux est de chercher par Google

Fabien
Eddoh
5 mai 2011

Peut tu m'expliquer un peut comment je peux procéder car je suis un débutant .
fnicollet
5 mai 2011

Ce serait long à expliquer dans un commentaire, le mieux est de lire les tutoriaux qui vont te dire exactement ce que je vais te dire
http://www.flex-tutorial.fr/tutorial-flex-liste/

Lit tous ceux qui concernent "Flex Item Renderer"

Fabien
Eddoh
21 novembre 2011

Bonsoir,

Est'il possible d'avoir des sous colonnes dans une colonne d'un datagrid ?
fnicollet
21 novembre 2011

Oui, avec le composant AdvancedDataGrid et les colonnes groupées

Fabien
Eddoh
21 novembre 2011

Merci infiniment.