# Chapter 2
## Overview
In this chapter we will add a grid component to the form to show all orders and allow the user to click through records. We'll add some related data and we'll learn about positioning components.
### Key Concepts Covered
* **Relations**
* **Data Grids**
* **Simple Positioning**
* **Date format** (review)
## Create a Relation
Let's get started by creating your first Relation. We're going to create a relation from the `orders` table to the `customers` table.
The Relation Editor; creating the relation orders_to_customers
1. From the [Solution Explorer](https://docs.servoy.com/reference/servoy-developer/solution-explorer), right-click the "Relations" node and select "Create Relation". This will open the [Relation Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/relation-editor).
2. Set the `Source` by clicking the `...` button to open the Data Source Chooser. Select `example_data.orders`and click OK.
3. Set the `Destination` by choosing `example_data.customers`
4. Create one relation item where `orders.customerid` `"="` `customers.customerid`
5. Save the editor.
{% hint style="info" %}
Notice you don't have to specify the relation name. The editor will always suggest `source_to_destination`, in this case **orders\_to\_customers**. This is a good convention to follow for ordinary relations.
{% endhint %}
## Create a Data Grid
In this step you will create your first **Data Grid** and position your components more precisely using **Simple Positioning**.
### Re-Position your Fields and Labels
We are going to add a Data Grid to the left side of the form, but first weEdit need to make some space for it, let's move our fields and labels out of the way.
Edit the CSS Position Left property
1. Select all your components by click-dragging a box around them. Now you can edit their shared properties in one go.
2. In the **Properties Editor**, expand the `cssPosition` property and edit the left property, clicking the `...` to open the **CSS Position Property Editor**.
3. Choose the `calc` option and set it to `25% + 10px`. This will position the left edges of the component 25% of the total width of the form, plus an additional 10 pixels.
### Place the Data Grid
Now we are ready to place the Data Grid so the user can easily click through multiple order records.
Place a Data Grid
1. From the pallet, drag the Data Grid component on to your form. The [Grid Columns Configurator](https://github.com/Servoy/gitbook/blob/master/guides/get-started/broken-reference/README.md) will immediately open.
2. You will see the `orders_to_customers` relation that you have already created. Expand it and choose the `companyname` data provider.
3. Choose one more data provider, `orderdate`.
4. Edit the Header Title property, entering `Customer` and `Date` (These will appear in the column headers) and click OK.
#### Adjust the Position
Let's adjust the grid's position, similar to what we did to the other components. Select the grid and edit the cssPosition property. Enter the following values.
* right: 75% (75% of the width of the form from the right edge)
* bottom: 10px (10 pixels from the bottom)
* left: 10px (10 pixels from the left edge)
* min-width: -1 (this means that no minimum will be enforced)
#### Set the Date Format
Select the date column on your grid. In the **Component Properties Editor**, edit the `format` property. Enter a value of `yyyy-MM-dd`. This will format your date column year-month-day.
Save your editors and preview your changes in the NG Client.
Preview Data Grid in NG Client
You can see that the grid is showing the related customer info with the formatted date. It occupies 25% of the form's width and it can be used to navigate records in the `orders` table.
{% hint style="success" %}
The form's grid and fields are data-bound and the Servoy platform manages all the querying, caching and record selection for you. No code needed!
{% endhint %}
