# 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.

<figure><img src="/files/1fXDTmjY2gUXJkEAR7Pr" alt=""><figcaption><p>The Relation Editor; creating the relation <code>orders_to_customers</code></p></figcaption></figure>

1. From the [Solution Explorer](/reference/servoy-developer/solution-explorer.md), right-click the "Relations" node and select "Create Relation". This will open the [Relation Editor](/reference/servoy-developer/object-editors/relation-editor.md).
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.

<figure><img src="/files/babdyGtNCqRZFgxtskB8" alt=""><figcaption><p>Edit the CSS Position Left property</p></figcaption></figure>

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.

<figure><img src="/files/cpB1ot0fRSFaQctkauP7" alt=""><figcaption><p>Place a Data Grid</p></figcaption></figure>

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.

![](/files/TLdpge1iZsjOzB7FfIOA)

* 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.

<figure><img src="/files/JKf5TD10IkCkMkYsqHcR" alt=""><figcaption><p>Preview Data Grid in NG Client</p></figcaption></figure>

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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/guides/get-started/create-a-solution.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.