Faire défiler les composants Data Grid

When you create a Data Grid with more than 12 Text Field components inside of it, the Data Grid becomes too tight to display the content. This tutorial demonstrates how to scroll through the Data Grid.

Tutoriel

Pour faire défiler un composant Data Grid :

1. Create a CSS file containing two classes for scrolling through the Data Grid and for making the Text Field components wider. The overflow-x: scroll property allows you to scroll through the Data Grid. The min-width: 300px property makes the Text Fields larger, to display the content inside of them.

   Copiez et collez le code suivant dans votre fichier CSS :

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

2. Go to the LocalCSSFilePath property in the Create Form activity and input the path to the CSS file created (for example, "/file://C:/User/theCssFile.css").

   Vous pouvez également stocker le chemin d'accès au fichier CSS local en tant que variable et saisir le nom de la variable dans le champ CheminFichierCSSLocal .

3. Accédez à l'onglet Affichage du composant Grille de données . 4. Dans le champ Classe CSS personnalisée , écrivez le nom de la classe CSS personnalisée configurée dans le fichier comme ceci : my-data-grid. Cela va lier les données du fichier CSS à votre formulaire.

   

4. Enregistrez le composant et la fiche.

Exemple de workflow

Pour vérifier le workflow complet ou pour avoir une référence future, téléchargez l’ exemple XAML