Most Ajax libraries with respect for themselves have a datagrid component. And therein lies the problem; *A DATAGRID COMPONENT*! It doesn’t matter how flexible and configurable these datagrids are. Regardless of how many parameters you can modify, there is still some minute feature lacking, which you can’t create, and which you’d like to create for some reasons.
Micro is different, since it instead of having a datagrid, features a “generic grid”, which simply allows you to create an HTML table element, from where you can modify every single aspect of it yourself, and extend it, to end up with the exact specific datagrid as you need. This feature of Micro, is as far as I know completely unique to Micro (and Phosphorus Five). It basically allows you to create any HTML/DOM structure you wish, while still having the grid help you put things into the correct “tbody”, “tr”, etc, elements on your page.
In the video below, I am walking through the most important features of the [micro.widgets.grid] extension widget from the latest v3.2 Aphrodite release. First watch the viddi, then scroll down on page to find the code I am using.
First example, statically creating items during creation of grid.
p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
class:container
widgets
container
class:row air-top
widgets
div
class:col-100
widgets
div
class:bg air-inner shaded rounded
widgets
micro.widgets.grid
columns
Name
Email
Phone no
rows
item
Name:Thomas Hansen
Email:thomas@gaiasoul.com
Phone no:12345678
item
Name:John Doe
Email:john@doe.com
Phone no:99887766
item
Name:Johhny Two-Times
Email:johhny@two-times.com
Phone no:67676767
item
Name:Jane Doe
Email:jane@doe.com
Phone no:99118822
item
Name:Peter Fisher
Email:peter@fisher.com
Phone no:91919191
Second example, dynamically populating grid after creation.
p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
class:container
widgets
container
class:row air-top
widgets
div
class:col-80
widgets
div
class:bg air-inner shaded rounded
widgets
micro.widgets.grid:my-grid
columns
Name
Email
Phone no
div
class:col-20
widgets
button
class:fill
innerValue:Populate grid
onclick
micro.widgets.grid.databind:my-grid
item
Name:Thomas Hansen
Email:thomas@gaiasoul.com
Phone no:12345678
item
Name:John Doe
Email:john@doe.com
Phone no:99887766
item
Name:Johhny Two-Times
Email:johhny@two-times.com
Phone no:67676767
item
Name:Jane Doe
Email:jane@doe.com
Phone no:99118822
item
Name:Peter Fisher
Email:peter@fisher.com
Phone no:91919191
Third example, widgets inside of your cells.
p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
class:container
widgets
container
class:row air-top
widgets
div
class:col-100
widgets
div
class:bg air-inner shaded rounded
widgets
micro.widgets.grid:my-grid
columns
Name
Email
Phone no
rows
item
Name:Thomas Hansen
Email
widgets
a
href:"mailto:thomas@gaiasoul.com"
innerValue:thomas@gaiasoul.com
Phone no:12345678
item
Name:John Doe
Email
widgets
a
href:"mailto:john@doe.com"
innerValue:john@doe.com
Phone no:99887766
Fourth example, widgets inside of your column headers.
p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
class:container
widgets
container
class:row air-top
widgets
div
class:col-100
widgets
div
class:bg air-inner shaded rounded
widgets
micro.widgets.grid:my-grid
columns
Name
Email
Phone no
widgets
a
href:#
role:button
innerValue:Phone no
onclick
set-widget-property:x:/../*/_event?value
innerValue:I was clicked!
rows
item
Name:Thomas Hansen
Email:thomas@gaiasoul.com
Phone no:12345678
item
Name:John Doe
Email:john@doe.com
Phone no:99887766
Fifth example, changing your rows, and/or your actual table as a whole.
p5.web.include-css-file:@MICRO/media/main.css
p5.web.include-css-file:@MICRO/media/skins/sea-breeze.css
create-widget
class:container
widgets
container
class:row air-top
widgets
div
class:col-100
widgets
div
class:bg air-inner shaded rounded
widgets
micro.widgets.grid:my-grid
style:"background-color:rgba(128,128,255,.2);"
columns
Name
Email
Phone no
rows
item
.row
style:"background-color:rgba(128,255,128,.2);"
Name:Thomas Hansen
Email:thomas@gaiasoul.com
Phone no:12345678
item
.row
role:button
onclick
create-widgets
micro.widgets.modal
class:micro-modal
widgets
h3
innerValue:The second row was clicked
p
innerValue:This was a clickable row ...
Name:John Doe
Email:john@doe.com
Phone no:99887766
To test out the above examples, make sure you’re using the latest release of Phosphorus Five, Micro, and System42 – Which is the Aphrodite KISS version 3.2. Then create a lambda page in the CMS, and make sure you set its “template” to “empty” in its settings.
To explain what’s going on, the grid in Micro simply creates an HTML table, and really nothing more – Allowing you to populate its content, in regards to both its attributes, rows, headers and cells in general – By adding whatever widgets/properties/attributes you wish to add inside of these elements.
In fact, by applying the above principle, I don’t think there exists a single “datagrid” on this planet, you couldn’t easily create yourself, and by creating your datagrid as an extension widget, making it reusable, you would end up with extremely “DRY” code.
Hence, the [micro.widgets.grid] instead of being a datagrid, becomes a 100% generic “datagrid framework”, allowing you to easily create your datagrids exactly as you see fit!
