Flex/DataGrid

Les DataGrid permettent de représenter une liste de données dans plusieurs colonnes. Par défaut, une data grid permet de sélectionner une ligne (avec surlignage de la ligne sélectionnée), d'effectuer des opérations de tri sur chaque colonne (click sur le header), de redimensionner les colonnes.

Premier exemple

Une collection d'objets est fournie à la data grid via la propriété dataProvider. Chaque colonne est décrite en indiquant d'une part le texte du header, et d'autre part la propriété de l'objet model à afficher.

<mx:DataGrid dataProvider="{_acProduits}">
  <mx:columns>
    <mx:DataGridColumn headerText="Code" dataField="code"/>
    <mx:DataGridColumn headerText="Libelle" dataField="libelle"/>
    <mx:DataGridColumn headerText="Prix" dataField="prix"/>
  </mx:columns>
</mx:DataGrid>

Sélectionner une colonne

Il s'agit de redéfinir les comportements par défaut de la data grid de façon à pouvoir sélectionner une colonne lorsque l'on clique sur le header ou sur une cellule. A cette fin, il faut définir les propriétés suivantes sur la data grid :

<mx:DataGrid id="myTable" dataProvider="{_acProduits}" useRollOver="false" selectable="false"
             headerRelease="myHeaderHandler(event)" itemClick="myItemHandler(event)">
  <mx:columns>
    <mx:DataGridColumn headerText="Code" dataField="code"/>
    <mx:DataGridColumn headerText="Libelle" dataField="libelle"/>
    <mx:DataGridColumn headerText="Prix" dataField="prix"/>
  </mx:columns>
</mx:DataGrid>

La couleur de fond de chaque colonne est affectée en fonction de la sélection.

private function myItemHandler(event:ListEvent):void {
  // colonne sélectionnée => gris
  for (var i:int = 0; i < myTable.columns.length; i++) {
    var column:DataGridColumn = myTable.columns[i];
    if (i == event.columnIndex) {
      column.setStyle("backgroundColor", "#AAAAAA");
    } else {
      column.setStyle("backgroundColor", "#FFFFFF");
    }
  }			
}

La couleur de fond de chaque colonne est affectée en fonction de la sélection. Il faut aussi prendre soin de ne pas désactiver la fonction de tri au niveau des colonnes (sortable="false"), sinon l'évènement n'est pas généré. En revanche, pour empêcher le tri après emission de l'évènement, il faut invoquer la méthode preventDefault() sur l'évènement.

private function myHeaderHandler(event:DataGridEvent):void {
  event.preventDefault();// pour éviter de déclencher le tri
  selectItem(event.columnIndex);
}