DELPHI STRINGGRID VCL TUTORIEL

Tutoriel StringGrid pour réaliser une application d'une liste de trois colonnnes "Nom, Prénom, Age". Ce tutoriel est un exemple simple. Celui-ci est modulable. Comment ajouter du texte saisi dans un TEdit et l'envoyer dans une cellule d'un TStringGrid ? Comment modifier le texte d'une cellule d'un TStringGrid ? Comment supprimer une ligne d'un TStringGrid ? Comment trier les lignes d'un TStringGrid en fonction d'une colonne ? Comment sauvegarder les données d'un TStringGrid ? Comment ouvrir des données dans un TStringGrid ? Comment déclarer et utiliser un type Packed Record ?

Conception de notre form :

Une fois DELPHI lancé, créer une nouvelle application VCL Windows - Delphi. Placer sur la Form les composants suivant : 1 TStringGrid, 7 TButton, 3 TEdit, 3 TLabel, 1 TOpenDialog, 1 TSaveDialog, 1 TComboBox.

Aperçu de la form :
StringGrid delphi aperçu final de l'application

Inspecteur D'objet :

Edit1, Edit2, Edit3 : Text : Pas de textes laisser les champs vide. Label1 : Caption : "Nom". Label2 : Caption : "Prénom". Label3 : Caption : "Age". Button1 : Caption : "Ajouter". Button2 : Caption : "Enregistrer...". Button3 : Caption : "Ouvrir...". Button4 : Caption : "Vider". Button5 : Caption : "Modifier", Enabled : False. Button6 : Caption : "Supprimer", Enabled : False. Button7 : Caption : "Annuler", Enabled : False. ComboBox1 : Items (TString) : "PAS DE TRI", "PAR NOM", "PAR PRENOM", "PAR AGE". ItemIndex : "0", Style : "csDropDownList". StringGrid1 : ColCount : "3", RowCount : "1" , FixedCols : "0", FixedRows : "0" , Options : goRowSelect "True".

Partie code :

Nous allons voir en détail comment faire fonctionner notre application.

FormCreate :
En mode conception, cliquer sur la Form. Inspecteurs d'objets -> Événement -> Double clic sur "OnCreate". Copier/Coller le code ci-dessous dans FormCreate.

procedure TForm1.FormCreate(Sender: TObject);
begin
  // Vous pouvez modifier les titres à votre guise. Exemple (Nom, Adresse, Telephone).
  // Vous pouvez modifier la largeur des colonnes.
  // Ceci n'affectera pas le bon fonctionnement.
  StringGrid1.Cells[0, 0] := 'Nom'; // Titre de la premiere colonne
  StringGrid1.Cells[1, 0] := 'Prémon'; // Titre de la deuxieme colonne
  StringGrid1.Cells[2, 0] := 'Age'; // Titre de la troixeme colonne
  StringGrid1.ColWidths[0] := 200; // Largeur de la premiere colonne
  StringGrid1.ColWidths[1] := 200; // Largeur de la deuxieme colonne
  StringGrid1.ColWidths[2] := 100; // Largeur de la troixeme colonne
end;
Button1Click :

En mode conception, cliquer sur le Button1. Inspecteurs d'objets -> Événement -> Double cliquer à droite de "OnClick" ou un double-clic sur Button1 (c'est plus rapide).
Ce morceau de code permet d'ajouter les données de nos trois TEdit à notre StringGrid après un clique sur le bouton ajouter.

procedure TForm1.Button1Click(Sender: TObject);
begin

  // Petite vérification pour voir si nos Edit ne sont pas vide. (Cela nous évite d'avoir des champs vides dans le StringGrid 
  if (Edit1.Text <> '') and (Edit2.Text <> '') and (Edit3.Text <> '') then begin

  // Ajoute une ligne au StringGrid
  StringGrid1.RowCount := StringGrid1.RowCount +1;

  StringGrid1.Cells[0, StringGrid1.RowCount-1] := Edit1.Text; // Ajoute le nom du TEdit1 au StringGrid
  StringGrid1.Cells[1, StringGrid1.RowCount-1] := Edit2.Text; // Ajoute le prénom du TEdit2 au StringGrid
  StringGrid1.Cells[2, StringGrid1.RowCount-1] := Edit3.Text; // Ajoute l'age du TEdit3 au StringGrid
  
  // Vide les trois Edit et donne le focus à l'Edit1
  Edit1.Text := '';
  Edit2.Text := '';
  Edit3.Text := '';
  Edit1.SetFocus;
  end; // fin de la vérification
Sauvegarde :

Pour pouvoir enregistrer et charger les données de notre StringGrid nous allons déclarer un type "Packed Record" que nous placerons dans notre code sous implémentation.
Copier/Coller le "Type" dans votre code.

var
  Form1: TForm1;

implementation

{$R *.dfm}

Type
 TElement = Packed Record
    EleNom : String[100];
    ElePrenom : String[100];
    EleAge : String[20];
 End;
Button2Click :

En mode conception, cliquer sur le Button2. Inspecteurs d'objets -> Evénement -> Double cliquer à droite de "OnClick" ou un double-clic sur Button2.
Ce morceau de code permet d'enregistrer les données de notre StringGrid dans un fichier après un clique sur le bouton enregistrer.

procedure TForm1.Button2Click(Sender: TObject);
 Var Fichier:File Of TElement;
 I : Integer;
 Element : TElement;
begin
 // Sauvegarde du StringGrid
 // Appel la boite de dialogue SaveDialog
   if SaveDialog1.Execute then
       begin
      AssignFile(Fichier, SaveDialog1.filename);
      ReWrite(Fichier);
    // Copie toute les cellule du Stringrid dans le TElement
    For i:=1 To StringGrid1.RowCount-1 Do
    Begin
      Element.EleNom := StringGrid1.Cells[0,i];
      Element.ElePrenom := StringGrid1.Cells[1,i];
      Element.EleAge := StringGrid1.Cells[2,i];
     // Ecrit les Element dans le Fichier
       Write(Fichier,Element);
    End;
  End;
 // Ferme le Fichier
  CloseFile(Fichier);
 end;
Button3Click :

En mode conception, cliquer sur le Button3. Inspecteurs d'objets -> Evénement -> Double cliquer à droite de "OnClick" ou un double-clic sur Button3.
Ce morceau de code permet d'ouvrir un fichier (que nous avons préalablement sauvegardé) et afficher les données dans notre StringGrid après un clique sur le bouton Ouvrir.

procedure TForm1.Button3Click(Sender: TObject);
  Var Fichier:File Of TElement;
  Element:TElement;
begin
// Ouvrir des données dans le StringGrid
// Appel la boite de dialogue OpenDialog
 if OpenDialog1.Execute then
 begin
    AssignFile(Fichier, OpenDialog1.FileName);
    Reset(Fichier);
    // Efface les cellules du StringGrid (sauf la premiere ligne
    StringGrid1.RowCount := 1;
	// Parcours le Fichier et remplie les cellule du Stringrid
    While Not Eof(Fichier) Do
    Begin
	// Lit les données du Fichier
      Read(Fichier,Element);
     StringGrid1.RowCount := StringGrid1.RowCount +1;

  StringGrid1.Cells[0, StringGrid1.RowCount-1] := Element.EleNom;
  StringGrid1.Cells[1, StringGrid1.RowCount-1] := Element.ElePrenom;
  StringGrid1.Cells[2, StringGrid1.RowCount-1] := Element.EleAge;

    End;
	 // Ferme le Fichier
    CloseFile(Fichier);
  end;
end;
StringGrid1DrawCell :

En mode conception, cliquer sur le StringGrid1. Inspecteurs d'objets -> Evénement -> Double cliquer à droite de "OnDrawCell".
Ce morceau de code permet de fixer la première ligne du StringGrid (Nom, Prénon, Age) s'il contient au moins un enregistrement.

procedure TForm1.StringGrid1DrawCell(Sender: TObject; ACol, ARow: Integer;
  Rect: TRect; State: TGridDrawState);
begin
if StringGrid1.RowCount > 1 then
StringGrid1.FixedRows :=1
else
StringGrid1.FixedRows :=0;

end;
Button4Click :

En mode conception, cliquer sur le Button4. Inspecteurs d'objets -> Evénement -> Double cliquer à droite de "OnClick" ou un double-clic sur Button4.
Ce morceau de code permet de vider notre StringGrid (sauf la premiète ligne "Nom Prénom Age") après un clique sur le bouton Vider.

procedure TForm1.Button4Click(Sender: TObject);
begin
 StringGrid1.RowCount := 1;
end;
StringGrid1Click :

En mode conception, cliquer sur le StringGrid1. Inspecteurs d'objets -> Evénement -> Double cliquer à droite d' "OnClick" ou un double-clic sur StringGrid1.
Ce morceau de code permet de sélectionner une ligne du StringGrid pour pouvoir la modifier ou la supprimer. Active les boutons "Modifier", "Supprimer", "Annuler" et désactive le bouton "Ajouter".

procedure TForm1.StringGrid1Click(Sender: TObject);
 Var selection : Integer;
begin
 //  recupere la ligne sélectionner
 selection := StringGrid1.Row;
 // Si la sélection est inferieur à 1 on quitte la procedure
 if (selection < 1) then begin
   exit;
 end;
 // Si la sélection est superieur à 0
 if (selection > 0) then begin
   Button1.Enabled := False; // Désactive bouton Ajouter
   Button4.Enabled := False; // Désactive bouton Vider
   ComboBox1.Enabled := False;// Désactive Combobox1
   Button5.Enabled := True; // Active bouton Modifier
   Button6.Enabled := True; // Active bouton Supprimer
   Button7.Enabled := True; // Active bouton Annuler
   // affiche les textes dans les 3 Edits
   Edit1.Text := StringGrid1.Cells[0, selection];
   Edit2.Text := StringGrid1.Cells[1, selection];
   Edit3.Text := StringGrid1.Cells[2, selection];
 end;
 
end;
Button5Click :

En mode conception, cliquer sur le Button5. Inspecteurs d'objets -> Événement -> Double cliquer à droite de "OnClick" ou un double-clic sur Button5 (c'est plus rapide).
Ce morceau de code permet de modifier les champs sélectionner de notre StringGrid après un clique sur le bouton modifier.

procedure TForm1.Button5Click(Sender: TObject);
Var selection : Integer;
begin
 selection := StringGrid1.Row;
 if (Edit1.Text <> '') and (Edit2.Text <> '') and (Edit3.Text <> '') then begin

  // modifier les textes des cellules du StringGrid
  StringGrid1.Cells[0, selection] := Edit1.Text;
  StringGrid1.Cells[1, selection] := Edit2.Text;
  StringGrid1.Cells[2, selection] := Edit3.Text;

  // retablir les boutons
  Button1.Enabled := True;
  Button4.Enabled := True;
  ComboBox1.Enabled := True;
  Button5.Enabled := False;
  Button6.Enabled := False;
  Button7.Enabled := False;

  // vider le champs textes
  Edit1.Text := '';
  Edit2.Text := '';
  Edit3.Text := '';
  Edit1.SetFocus;
  end; // fin de la verification
end;
Button6Click :

En mode conception, cliquer sur le Button6. Inspecteurs d'objets -> Événement -> Double cliquer à droite de "OnClick" ou un double-clic sur Button6.
Ce morceau de code permet de supprimer la ligne sélectionnée du StringGrid après un clique sur le bouton supprimer.

procedure TForm1.Button6Click(Sender: TObject);
var
selection, i: Integer;
begin
 // récupere le numero de ligne selectionner
 selection := StringGrid1.Row;
 // faire une boucle en partant de la sélection et decaler tout les rows
  for i := selection to StringGrid1.RowCount - 2 do
    StringGrid1.Rows[i] := StringGrid1.Rows[i + 1];
  StringGrid1.RowCount := StringGrid1.RowCount - 1;

 // on repasse en mode ajouter 
 Button1.Enabled := True;
 Button4.Enabled := True;
 ComboBox1.Enabled := True;
 Button5.Enabled := False;
 Button6.Enabled := False;
 Button7.Enabled := False;
 Edit1.Text := '';
 Edit2.Text := '';
 Edit3.Text := '';

end;
Button7Click :

En mode conception, cliquer sur le Button7. Inspecteurs d'objets -> Événement -> Double cliquer à droite de "OnClick" ou un double-clic sur Button7.
Ce morceau de code permet d'annuler le mode modifier, supprimer et de passer en mode ajouter après un clique sur le bouton annuler.

procedure TForm1.Button7Click(Sender: TObject);
begin
 // passe en mode ajouter
 Button1.Enabled := True;
 Button4.Enabled := True;
 ComboBox1.Enabled := True;
 Button5.Enabled := False;
 Button6.Enabled := False;
 Button7.Enabled := False;
 Edit1.Text := '';
 Edit2.Text := '';
 Edit3.Text := '';
end;
ComboBox1Select :

En mode conception, cliquer sur le ComboBox1. Inspecteurs d'objets -> Événement -> Double cliquer à droite de "OnClick".
Ce morceau de code permet de trier les cellules du StringGrid par nom ou prénom ou age.

procedure TForm1.ComboBox1Select(Sender: TObject);
Var i,j : Integer;
    S : String;
Begin
 // Si la sélection du ComboBox1 est 0 on quitte la procedure
 if ComboBox1.ItemIndex = 0 then begin
   exit;
 end;
 // Si la sélection du ComboBox1 est superieur à 0 tri les cellules du StringGrid
 if ComboBox1.ItemIndex > 0 then begin
  With StringGrid1 Do
  Begin
    For i:=1 To rowcount-2 Do
      For j:=i+1 To RowCount-1 Do
        If Cells[ComboBox1.ItemIndex-1,i]>Cells[ComboBox1.ItemIndex-1,j] Then
        Begin
          S := Rows[i].Text;
          Rows[i].Text := Rows[j].Text;
          Rows[j].Text := S;
        end;
  end;
 end;
end;