Chapter 2
Create your first data grid and enhance your layout
Last updated
Create your first data grid and enhance your layout
Last updated
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.
Relations
Data Grids
Simple Positioning
Date format (review)
Let's get started by creating your first Relation. We're going to create a relation from the orders table to the customers table.
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. Select example_data.ordersand click OK.
Set the Destination by choosing example_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.
In this step you will create your first Data Grid and position your components more precisely using Simple Positioning.
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.
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 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.
Now we are ready to place the Data Grid so the user can easily click through multiple order records.
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 the companyname data provider.
Choose one more data provider, orderdate.
Edit the Header Title property, entering Customer and Date (These will appear in the column headers) and click OK.
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)
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.
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!
orders_to_customers
