Flex DataGrid – Sélection de lignes dans un Datagrid avec des Checkbox
Tutorial Flex écrit par Vincent Le Gallic (www.frianbiz.com). Publiez vous aussi sur flex-tutorial!
Un Datagrid supporte par défaut la multi-sélection grâce à la propriété allowMultipleSelection. Cependant l’utilisation du Ctrl+click pour sélectionner plus d'un item à la fois n’est pas toujours adaptée. Comme dans l’interface de Gmail (réputée conviviale et pratique) la multi sélection peut être gérée grâce à une case à cocher attribuée à chaque item de la liste. Voici une façon de mettre en place cette technique en Flex :
Tous les objets affichés dans le Datagrid doivent avoir une propriété qui vous permettra de savoir si la ligne est sélectionnée ou pas. Dans l’exemple ci-dessous cette propriété se nomme « selected »
<mx:Object songId="0" title="Astronaut" artist="David Byrne" selected="false"/>
Cette propriété est fixée et utilisée directement dans la donnée car les itemRenderer que l'on va utiliser ensuite ont un mécanisme de recyclage. Il nous faut donc un emplacement où garder cette valeur en mémoire. La donnée remplit parfaitement ce rôle.
Pour commencer il faut ajouter une colonne au Datagrid qui contiendra un inline item renderer. On peut ensuite ajouter notre Checkbox. La propriété selected de la Checkbox (qui définit si notre case est cochée ou pas) sera liée à la propriété selected des items du datagrid de la façon suivante :
<mx:CheckBox selected="{data.selected}"/>
Il faut ensuite écouter les changements d’état lorsqu’on clic sur la checkBox :
<mx:CheckBox selected="{data.selected}" click="{data.selected=!data.selected}"/>
On met à jour la propriété selected de l’item afin d’éviter tout affichage aléatoire du à l’utilisation d’un itemRenderer dans un Datagrid.
Mes projets (Open Source)
Autres
