Composant JVCL

Afficher des puces dans un DbGrid

Un tableau de données avec des dessins

Le but de cet article est de montrer comment afficher des puces de couleurs dans les colonnes d’un DbGrid, le choix de l’image devant être fonction de la valeur d’un champ de la ligne courante.

Depuis la première version de Delphi, la barre de composant propose un objet permettant d’afficher des données issues d’une base de données sous forme tabulaire et cela uniquement avec quelques click souris sans avoir à taper la moindre ligne de code. Ce composant n’a malheureusement pas beaucoup évolué et par défaut, ce dernier n’affiche que des données textuelles. Mais, nous allons voir qu’avec quelques lignes de codes, il est possible d’améliorer les choses.

Sommaire

1.Présentation

Le but de cet article est de montrer comment afficher des puces de couleurs dans les colonnes d’un DbGrid, le choix de l’image devant être fonction de la valeur d’un champ de la ligne courante.

Le résultat devra donc ressembler à la capture d’écran suivante ou l’on voit que des puces de couleurs différentes sont affichées en fonction de la valeur du champ de la colonne de gauche.

2. Le programme

a) Connexion d’un composant DbGrid à une base de données

Créons un nouveau projet avec un DataModule. Ajoutons les composants IBX permettant de se connecter à une base de données (InterBase/FireBird dans l’exemple).

On connecte l’application à la base de données EMPLOYEE.GDB, exemple fourni avec Delphi et InterBase. Dans la fenêtre principale, ajoutons un DbGrid que l’on reliera à la table EMPLOYEE. On selectionne les colonnes suivantes :

b) Chargement des puces dans un composant ImageList

On va ajouter une colonne qui affichera une puce de couleur différente selon le contenu du champs JOB_COUNTRY : rouge si le contenu est ’USA’, vert pour ’Canada’ et gris pour les autres valeurs.

Pour cela, on va ajouter un ImageList dans lequel on va charger les puces. Ces dernières ayant une taille de 10x10 on va modifier les propriétés Height et Width de l’ImageList comme suit :

Puis on charge nos puces dans l’ImageList.

c) Ajout d’un champ calculé

On va maintenant ajouter un champs calculé à la table tblEmployee

Ce qui donne, en ajoutant la colonne à l’affichage de la grille

d) Code de l’évènement chargé de l’affichage de la cellule

Il nous reste à ajouter les quelques lignes de code sur l’événement OnDrawColumnCell du DbGrid.

//==============================================================================
procedure TfrmMain.DBGrid1DrawColumnCell(Sender: TObject; const Rect: TRect;
DataCol: Integer; Column: TColumn; State: TGridDrawState);
{*******************************************************************************
*
* Affiche une puce différente en fonction de la valeur contenue dans
* JOB_COUNTRY
*
*****}
var
i: integer;
begin
with dtmdlIB do
begin
if ( Column.FieldName = 'ImagePay' ) then
begin
if tblEmployeeJOB_COUNTRY.Value = 'Canada' then
i := 0
else if tblEmployeeJOB_COUNTRY.Value = 'USA' then
i := 1
else
i := 2;
ImageList1.draw( DBGrid1.Canvas ,Rect.Left + 20 , Rect.Top + 4, i );
end;
end;
end;

Télécharger

Après exécution, nous avons bien nos puces qui s’affichent en fonction de la valeur de JOB_COUNTRY

Remarques : On n’est pas obligé de créer un champs calculé pour ajouter une image mais l’avantage est que l’on a pas à traiter l’affichage par défaut des colonnes correspondant à des champs et de plus cela permet, comme dans cet exemple d’afficher le contenu du champ dans une colonne et la correspondance graphique dans une autre colonne.

3. Pour conclure

Cet article vous a montré comment afficher des images dans des cellules d’un DbGrid. Il est également possible, par une autre méthode de changer les couleurs du texte ou du fond d’une cellule en fonction des données à afficher.

Développement

Article n° 8

Crée par: chris

Créé le: 20 février 2010

Modifié le: 21 novembre 2019

Nombre de visites: 536

Popularité: 11 %

Popularité absolue: 1

Delphi, Pascal

Mots clés de cet article

Delphi, Pascal5