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!