Chapitre 10 - Afficher des images dans votre grille de données

‍

‍

Ajouter le composant DataGrid

‍

Commencez par glisser-déposer le composant DataGrid sur votre page.

‍

Connexion à la base de données

‍

• Cliquez sur la grille de données pour ouvrir ses paramètres.
• Choisissez Obtenir des données, puis cliquez sur Configurer.
• Sélectionnez la bonne base de données (par exemple, ChateauDB) et choisissez la table appropriée.
• Cliquez sur "Inclure" pour désélectionner toutes les colonnes par défaut.
• Sélectionnez les colonnes spécifiques que vous souhaitez afficher :
  • Nom de l'employé
  • MoodScore
  • FeedbackComment
  • Image (cette colonne doit contenir des URL d'images ou des données base64)

Cliquez sur Valider pour confirmer.

‍

Prévisualisation du résultat

‍

• Cliquez sur Aperçu.
• Les données s'affichent maintenant dans la grille de données, y compris les images.
• Cependant, les images peuvent apparaître trop grandes par défaut.

‍

Ajuster la grille aux images

‍

Pour fixer la taille de l'image :

1. Retournez dans les paramètres de la grille de données.
2. Cliquez sur le mode avancé (l'icône "A" en haut à droite, qui se transforme en "S").
3. En Paramètres avancés, apportez les modifications suivantes :
   • Attribuer la valeur True à l'option Make columns fit the grid with no horizontal scrolling (Faire tenir les colonnes dans la grille sans défilement horizontal).
   • Assurez-vous que l'option Autoriser la largeur de la colonne en fonction du contenu de la cellule (peut entraîner un défilement) est désactivée.

Cliquez sur Valider une fois que c'est fait.

‍

Aperçu de la finale

‍

Retourner au mode de prévisualisation.

Votre grille de données devrait maintenant afficher les images à la bonne taille, en s'intégrant parfaitement dans la mise en page - aucun défilement horizontal n'est nécessaire.

‍