Scrolling Through Data Grid Components

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.

Tutorial

To scroll through a Data Grid component:

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.

   Copy and paste the following code into your CSS file:

   .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").

You may also store the path to the local CSS file as a variable, and input the variable name in the LocalCSSFilePath field.

3. Navigate to the Display tab of the Data Grid component. 4. In the Custom CSS Class field, write the name of the custom CSS class configured in the file like this: my-data-grid. This binds the data in the CSS file to your form.

5. Save the component and the form.

Sample workflow

To check the complete workflow or to have a future reference, download the XAML example