Building Your First Data Grid

This tutorial is an example of a Data Grid that displays data about the breeds and ages of certain dogs. The Data Grid shows the data through a Text Field and a Number component.

Tutorial

To work with the Data Grid component:

1. Drag and drop a Sequence activity into your workflow.

2. Drag and drop a Build Data Table activity into the Sequence.

   1. Go to the DataTable property and press ctrl + K on your keyboard. When Set var: appears in the Datatablefield, type in a name for the data table. For this example, type in dogBreedDataTable This creates a DataTable variable in which you store the data table.
   2. Click . The Build Data Table window opens.
   3. Rename Column1 as Breed. 2.4. Rename Column2 as Age.

   Remember the names of the table and columns, because you will use them as the Property Names for the components inside your form.

3. Drag and drop a Create Form activity into the Sequence.

   1. In the Properties panel, uncheck GenerateInputFields. If left checked, a component will be automatically added in the Form Designer, based on the argument type.
   2. For the FormFieldsCollection property click ellipsis . The FormFieldsCollection window opens.
   3. Create an argument named dogBreedTable. Set the Direction as In/Out, choose the type System.data.DataTable and set the value as the data table you created, named dogBreedDataTable.

4. In the Create Form activity, click Open Form Designer.

5. Drag and drop a Data Grid component in the form.

   1. In the Display tab, rename the label of the component as Dogs Data Grid.
   2. In the Field Key tab, input the name of the data table argument created in the FormFieldsCollection property. This binds the data to the form. For this example, input dogBreedTable in the Property Name field.

6. Drag and drop a Text Field component inside the Data Grid.

   1. In the Display tab, rename the label of the component as Dog Breed.
   2. In the Field Key tab, input the name of the String column in the data table. For this example, input Breed in the Property Name field.

7. Drag and drop a Number component.

   1. In the Display tab, rename the label of the component as Dog Age.
   2. In the Field Key tab, input the name of the Int32 column in the data table. For this example, input Age in the Property Name field.

8. Save the form and run the workflow to test the capabilities of the Data Grid.

   

Sample Workflow

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