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.

The Relation Editor; creating the relation orders_to_customers

1. From the Solution Explorer, right-click the "Relations" node and select "Create Relation". This will open the Relation Editor.

2. Set the Source by clicking the ... button to open the Data Source Chooser. Select example_data.ordersand 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.

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.

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

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!