Flex/AdvancedDataGrid

L'AdvancedDataGrid étend les possibilités du composant standard DataGrid, afin d'améliorer la visualisation des données. Les caractéristiques de ce composant sont les suivantes :


Premier exemple

L'AdvancedDataGrid s'utilise comme un DataGrid. La différence se voit essentiellement à l'affichage, notamment au niveau du header avec une zone spécifique pour le tri. L'exemple ci-dessous affiche des produits (libellé en première colonne) et leur catégorie associée (code et libellé respectivement en deuxième et troisième colonne).

<mx:AdvancedDataGrid designViewDataType="flat" dataProvider="{_acProduits}">
  <mx:columns>
    <mx:AdvancedDataGridColumn headerText="Produit" dataField="libelle"/>
    <mx:AdvancedDataGridColumn headerText="Code catégorie" dataField="code"/>
    <mx:AdvancedDataGridColumn headerText="Libellé catégorie" dataField="libelle"/>
  </mx:columns>
</mx:AdvancedDataGrid>

Colonnes groupées

L'idée des colonnes groupées consiste à créer un header commun pour des champs qui possèdent un lien entre eux. Reprenons ainsi l'exemple précédent de façon à grouper les colonnes relatives à la catégorie (notez que l'on définit maintenant les colonnes avec l'élément groupedColumns et non plus columns) :

<mx:AdvancedDataGrid designViewDataType="flat" dataProvider="{_acData}">
  <mx:groupedColumns>
    <mx:AdvancedDataGridColumn headerText="Produit" dataField="libelle"/>
    <mx:AdvancedDataGridColumnGroup headerText="Catégorie">
      <mx:AdvancedDataGridColumn headerText="Code" dataField="code"/>
      <mx:AdvancedDataGridColumn headerText="Libellé" dataField="libelle"/>
    </mx:AdvancedDataGridColumnGroup>
  </mx:groupedColumns>
</mx:AdvancedDataGrid>

Supprimer la zone d'affichage du tri dans le header

L'AdvancedDataGrid utilise un header renderer par défaut qui affiche une zone pour le tri. Si on souhaite une table sans tri, cette zone devient gênante car elle prend de la place inutilement dans le header. Pour supprimer la zone, il suffit de redéfinir le header renderer de la table : pour cela, il faut d'une part créer un composant renderer (dans notre exemple un label), et d'autre part positionner l'attribut headerRenderer=classe_du_composant au niveau de la data grid.

public class SimpleHeaderRenderer extends Label
{
  public function SimpleHeaderRenderer()
  {
    setStyle('fontWeight', 'bold');
    setStyle('textAlign', 'center');
  }
}
<mx:AdvancedDataGrid designViewDataType="flat" dataProvider="{_acData}" headerRenderer="SimpleHeaderRenderer" sortableColumns="false">
  <mx:groupedColumns>
    <mx:AdvancedDataGridColumn headerText="Produit" dataField="libelle"/>
    <mx:AdvancedDataGridColumnGroup headerText="Catégorie">
      <mx:AdvancedDataGridColumn headerText="Code" dataField="code"/>
      <mx:AdvancedDataGridColumn headerText="Libellé" dataField="libelle"/>
    </mx:AdvancedDataGridColumnGroup>
  </mx:groupedColumns>
</mx:AdvancedDataGrid>