Chapter 2
Create your first data grid and enhance your layout
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.
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252FcZ2xfFFj2z6p5jDf1I5n%252Fimage.png%3Falt%3Dmedia%26token%3D68730048-e9e6-4890-9099-a509977e5f13&width=768&dpr=4&quality=100&sign=9b005c58&sv=1)
orders_to_customers
From the Solution Explorer, right-click the "Relations" node and select "Create Relation". This will open the Relation Editor.
Set the
Source
by clicking the...
button to open the Data Source Chooser. Selectexample_data.orders
and click OK.Set the
Destination
by choosingexample_data.customers
Create one relation item where
orders.customerid
"="
customers.customerid
Save the editor.
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.
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.
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252FOsAyFnbErNtIYdKaLOeF%252FServoyTutorial%2520-%2520Position%2520Fields.gif%3Falt%3Dmedia%26token%3De1050077-2eb5-4e68-8fe6-8d1c0e0cd911&width=768&dpr=4&quality=100&sign=75dd8469&sv=1)
Select all your components by click-dragging a box around them. Now you can edit their shared properties in one go.
In the Properties Editor, expand the
cssPosition
property and edit the left property, clicking the...
to open the CSS Position Property Editor.Choose the
calc
option and set it to25% + 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.
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252FvgeOL4ki6h3MiFDUoz3p%252FServoyTutorial%2520-%2520Place%2520Data%2520Grid.gif%3Falt%3Dmedia%26token%3Def29bf2b-59e8-4ef3-8cfe-a1d816aa61a7&width=768&dpr=4&quality=100&sign=a213f4ba&sv=1)
From the pallet, drag the Data Grid component on to your form. The Grid Columns Configurator will immediately open.
You will see the
orders_to_customers
relation that you have already created. Expand it and choose thecompanyname
data provider.Choose one more data provider,
orderdate
.Edit the Header Title property, entering
Customer
andDate
(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.
![](https://docs.servoy.com/~gitbook/image?url=https%3A%2F%2F3933488479-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FjpWd52BKwABWxF2lScUK%252Fuploads%252FgTtd5ku8655yMZOmRpG7%252FServoyTutorial%2520-%2520Preview%2520Data%2520Grid.gif%3Falt%3Dmedia%26token%3D209cb16f-f249-4066-a4c8-7ad20d146f7a&width=768&dpr=4&quality=100&sign=1064ddf4&sv=1)
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.
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!
Last updated