Creating a million Ajax datagrids in 20 minutes – Aphrodite KISS

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!

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s