Tutorial n°4 : Create and use Grids

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
Success !

You successfully completed this step, please click the Next Step button to go to next tutorial step
Close
You did not complete all the actions required in this step, are you sure you want to go to the next step ?