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