8. Grid System
The x0 grid system is implemented through the sysGridGenerator system object, which is responsible for generating a grid layout by processing source objects into structured rows and columns. Below is an explanation of its key components and functionality:
Key Components:
- Source Objects:
The grid generator takes an array of source objects as input, which are processed into grid elements.
- Row and Column Styles:
Customizable row and column styles (RowStyles and ColStyles) allow you to define the CSS styling for each grid element.
- Row and Column Enclosures:
Rows and columns are enclosed in containers (sysObjDiv objects) for structured layout. The number of elements after which rows and columns are enclosed can be customized using RowAfterElements and ColAfterElements.
- Generators for Indices and Styles:
The system uses generators (RowIndexGenerator, ColIndexGenerator, RowStyleGenerator, ColStyleGenerator) to dynamically determine the next row/column indices and styles.
- Dynamic Grid Creation:
- The generate method processes the source objects:
Groups objects into columns based on ColAfterElements. Groups columns into rows based on RowAfterElements.
Each grid element is assigned a unique identifier for DOM manipulation.
- Integration with Other System Objects:
The grid system interacts with other x0 system objects, such as sysObjDiv, to create and manage the grid structure dynamically.
Workflow:
- Initialization:
The sysGridGenerator object is initialized with row/column styles and enclosure settings.
- Grid Generation:
- The generate method iterates over the source objects:
Groups objects into columns. Groups columns into rows.
The generated rows are returned as an array of sysObjDiv objects, each representing a grid row.
- Styling and Customization:
Rows and columns are styled dynamically using the provided CSS styles or default styles.
8.1. Supported Object Types
Currently the following x0-object-types are supporting the x0-grid feature:
List
FormfieldList
Note
The x0-global-grid-system does not provide rowspan formating, this can be done otherwise by directly referencing or designing own x0-system-objects, see example #9 or 26. x0-Object Modeling.
Warning
You should be familiar with Bootstrap Grid system before continue reading.
8.2. Global JSON Metadata
If an x0-object supports x0-global-grid-system formatting the following properties can be set inside the objects “Attribute” representation.
Property |
Type |
Description |
|---|---|---|
RowStyle |
String / Array |
CSS Style Classes used for next Row-Element (Div) |
RowAfterElements |
Integer / Array |
Generate Row-Element at next RowAfterElements reached |
ColStyle |
String / Array |
CSS Style Classes used for next Col-Element (Div) |
ColAfterElements |
Integer / Array |
Generate Col-Element at next ColAfterElements reached |
Optional, Default 1 |
8.2.1. Input Data
The x0-grid-system processing requires an Array of Elements as input data.
[ el1, el2, el3, el4, el5, el6 ... ]
8.2.2. RowStyle / RowAfterElements
RowAfterElements is definable as a single string or an Array of Strings.
Setting "RowAfterElements": 1 will generate a row container div with css
class from RowStyle for each single Element.
<div class="row">
<el1></el1>
</div>
<div class="row">
<el2></el2>
</div>
<div class="row">
<el3></el3>
</div>
Setting "RowAfterElements": 2 will generate divs like this:
<div class="row">
<el1></el1>
<el2></el2>
</div>
<div class="row">
<el3></el3>
<el4></el4>
</div>
Setting "RowAfterElements": [ 1, 2 ] (Array type) like this:
<div class="row">
<el1></el1>
</div>
<div class="row">
<el2></el2>
<el3></el3>
</div>
<div class="row">
<el4></el4>
</div>
<div class="row">
<el5></el5>
<el6></el6>
</div>
Modifying "RowStyle": [ "row fw-bold", "row" ] renders:
<div class="row fw-bold">
<el1></el1>
</div>
<div class="row">
<el2></el2>
<el3></el3>
</div>
<div class="row fw-bold">
<el4></el4>
</div>
<div class="row">
<el5></el5>
<el6></el>
</div>
8.2.3. ColStyle / ColAfterElements
ColAfterElements processing is likewise RowAfterElements processing, with the difference of generating a column container div instead of a row container div.
Note
- Note that ColAfterElements default value is
[1], so the container div including CSS will be set for each processed element.
The last
"RowStyle": [ "row fw-bold", "row" ],
"RowAfterElements": [ 1, 2 ],
"ColStyle": "col-md-12"
"ColAfterElements": [ 1, 2 ]
<div class="row fw-bold">
<div class="col-md-12">
<el1></el1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<el2></el2>
<el3></el3>
</div>
</div>
<div class="row fw-bold">
<div class="col-md-12">
<el4></el4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<el5></el5>
<el6></el>
</div>
</div>
8.3. Example List
"RowStyle": "row",
"RowAfterElements": [ 2, 4 ]
"ColStyle": [
"col-md-5",
"col-md-7",
"col-md2",
"col-md3",
"col-md3",
"col-md5"
]
Without table header the resulting output looks like the following.
+---------------------------------+---------------------------------+
| Col1 (col-md-5) | Col2 (col-md-7) |
+----------------+----------------+----------------+----------------+
| Col3 (col-md2) | Col4 (col-md3) | Col5 (col-md3) | Col6 (col-md5) |
+---------------------------------+---------------------------------+
| Col1 (col-md-5) | Col2 (col-md-7) |
+----------------+----------------+----------------+----------------+
| Col3 (col-md2) | Col4 (col-md3) | Col5 (col-md3) | Col6 (col-md5) |
+----------------+----------------+----------------+----------------+
8.4. Developer
Any x0-system-object can make use of the global grid formatting routines in case an Array of Elements exists as input data.
Checkout the developer documentation how to implement grid formating into your self designed x0-objects.