In this tutorial we are about to see how to create efficiently grids for your applications.
Step 1 : Create a new project
You are now used to this starting step, but in case you forgot : To create a new project, go to File -> New -> Project and search "Convertigo Low Code FullStack Web/Desktop or Mobile app project" and name it "grid_tutorial".
Once your project has been created. simply use the play button to open the Visual App Viewer.
Note: Don't forget that if you name your project differently, you will not be able to continue properly the tutorial..
Step 2 : Integrate Grids
In your project, go to Application -> NgxApp
-> Pages -> Page -> Content then click it and search for the "Grid" component in the Palette.
When dragging the Grid component to the App Viewer window you can choose to drop it before, inside or after the target element.
Moreover, it comes with a Grid row, two Grid columns and text inside them.
This is called 'Hint' components.
Most of the Convertigo NGX components have it.
Change text 'Column11' to '1' and 'Column12' to '2'.
Then select the first "GridCol" component, copy it (CTRL+C) and paste it (CTRL+V).
Depending where you are in the treeview you will have to choose 'As a sibling' button to paste next to it or 'As as child' if you are in the parent component ("GridRow") to paste it inside it.
Repeat the operation to finally have twelve (12) "GridCol" components with text going from 1 to 12.
Now that you have created it all, you surely want to display the grid borders : To do so, click the "Show all grids or current selected" button located next to the app viewer (the last icon in the vertical toolbar).
There are 3 colored borders :
- Red is for the grid itself
- Blue is for the grid row
- Green is for the grid columns
Step 3 : Size your Grid
You now have your twelve columns displayed in your application. We want to set their size depending on the screen resolution : Let's start by defining the smallest screen : 0-576 px. Select all your GridCol (1 to 12) by holding Shift + Click, then go to the properties and look for "Size 0-576 px (xs)" and select 12. It means in this screen size, your grid will be displayed vertically.
Step 4: Size your Grid #2
Let's define the other screen sizes. Repeat the operation of selecting all your GridCol (Shift + click) and this time choose "Size 576-768 px (sm)" and define it at 6. It means that once the screen size is greater than 576px, the grid will be displayed as 6 columns on the left and 6 colums on the right. That's the basic principle of responsivness, how your grid will display depending on the space it has.
Step 5: Size your Grid #3
Just do the same with the upper screen size "768-992 px (md)" and define it's size to 1. That means it will be displayed one next to another horizontally, taking the full screen size. You can obviously pick the sizes you want in the Properties tab depending on how you want to display it, this tutorial shows you the basics.
Finally, the next step will show how to center your content (your text) in your grid.
Step 6: Center elements in your grid
Now that grid sizing has no longer secret for you, let's see how you can interact with the content you put in the grid (in this case the numbers 1 to 12) :
Put your grid and grid row height as "Not set" in the properties so that it adapts to the height of the columns content.
Then, in the palette, look for the "Format Layout" component. This is the component that will position the text in your element (the grid in this case).
Drag & drop this Format Layout in the "Grid" element, then simply change the general "Alignment" property to "ion-text-center"
Step 7: Center elements in your grid #2
If you want to vertically align column content in your Grid, here is what you have to do :
First you will have to put the grid height back to 100% (red border) and put the grid row height back to 100% (blue border) in the properties.
Then, in the grid row properties, change the Alignment to "ion-align-items-center". You can see that the columns are centered in the available space of the row.
When you add content to a column, the "cell" takes up more space in the Grid Row and all the columns continue to be centered between them. To be sure, let's add something in a cell.
To do so, search for "Generic Item" in the palette, and the objective is to drag & drop it in the cell number 4. But something is wrong... You can't see precisely where to put it.
To clarify, click the "show all grid or current selected" icon to disable it (the bottom icon in the Visual App Viewer) and click the "Remove highlight" to remove the current selection (the fifth icon starting from the top on the left on the Visual App Viewer).
Now Drag & Drop again your Generic Item in the cell 4 : You can see which element is targeted!
Choose "after" when you drag & drop it, then do it 3 times but choose "inside" for the second and "before" for the third.
Then show the grid borders again (show all grid or current selected). Modify the Alignment property of the grid row on "ion-align-items-end" to show that the columns align at the bottom.
This tutorial is now completed. If you want to go further on how to use other grid properties, have a look at the Convertigo documentation :
Access Convertigo Grid Documentation