Faire défiler les grilles de données

Lorsque vous créez une grille de données avec plus de 12 composants de champ de texte à l'intérieur, la grille de données devient trop étroite pour afficher le contenu. Ce tutoriel montre comment faire défiler la grille de données et agrandir les composants à l’intérieur pour que le contenu devienne plus lisible.

1. Accédez au panneau Propriétés (Properties) du formulaire auquel vous souhaitez ajouter la grille de données.
2. Dans le champ CSS personnalisé , saisissez les classes CSS suivantes :

   .my-data-grid
   {
      overflow-x: scroll;
   }
    
    
   .my-data-grid-input 
   {
      min-width: 6000px;
   }

   La propriété overflow-x: scroll vous permet de faire défiler la grille de données. La propriété min-width: 300px agrandit les champs de texte à l'intérieur d'une grille de données pour afficher le contenu à l'intérieur.
   
   

   

   
   
3. Ajoutez un composant Data Grid dans le formulaire.
4. Dans l'onglet Affichage (Display), ajoutez les classes CSS personnalisées dans le champ Classe CSS personnalisée ( Custom CSS Class ). Ajoutez les deux classes en les séparant par un seul espace.
   
   

   

   
   

L'image ci-dessous montre à quoi ressemble une grille de données avec 12 champs de texte .

Vous pouvez maintenant la comparer avec la grille de données ci-dessous, après avoir appliqué le CSS personnalisé.