Creating your own Ajax datagrid in Hyperlambda using Micro

In the video below, I am demonstrating how you could extend [micro.widgets.grid.databind] to create your own datagrid, yet still utilise all the existing features from the core Micro components. The code can be found below the video.

Unless you want to create your own column types, you don’t actually need to extend the [micro.widgets.grid] extension widget itself, but you can actually get away with only extending the databind event instead. This allows you to build a specialised “datagrid”, where you instead of relying upon the default behaviour of the grid, can create the cells of your grid exactly as you see fit. Which of course keeps your code very “DRY”. Here’s a screenshot of how our datagrid will end up looking like.

Then a screenshot of what happens as you click any of its cells.

To understand how we built it, feel free to watch the following 4 minutes long video.

Realise that we created the above specialised grid with 61 lines of code, and to consume it is a handful of lines of code. Below you can find the code for creating our databind Active Event first. Evaluate the following code in System42’s executor first.

create-event:micro.samples.widgets.grid-1.databind

  /*
   * Used to separate arguments from the rest of our lambda.
   */
  .signal

  /*
   * Adding items according to how they were defined.
   * Making sure the items becomes possible to edit, by
   * tossing up a modal widget, with a wizard form when cell is clicked.
   */
  for-each:x:/@.signal/--/<-(!/_arg)
    add:x:/../*/micro.widgets.grid.databind
      src:item
    for-each:x:/@_dp/#/*
      add:x:/../*/micro.widgets.grid.databind/0/-
        src:x:/@_dp/#
      eval-x:x:/+/**/a/*/innerValue
      add:x:/../*/micro.widgets.grid.databind/0/-/0/-
        src
          widgets
            a
              href:#
              role:button
              innerValue:x:/@_dp/#?value
              onclick
                eval-x:x:/+/**/_anchor
                create-widgets

                  // Creating a modal widget.
                  micro.widgets.modal:my-modal
                    class:micro-modal
                    widgets
                      h3
                        innerValue:Edit item

                      // Adding a wizard form.
                      micro.widgets.wizard-form:my-form
                        text:new-value
                          oninit
                            micro.page.set-focus:x:/../*/_event?value
                          info:New value
                      div
                        class:right
                        widgets
                          button
                            innerValue:Save
                            onclick

                              // Serializing wizard form, and updating cell's content.
                              micro.form.serialize:my-form
                              delete-widget:my-modal
                              _anchor:x:/../*/_event?value
                              set-widget-property:x:/@_anchor?value
                                innerValue:x:/@micro.form.serialize/*?value

  /*
   * Invoking "mother" event.
   */
  micro.widgets.grid.databind:x:/../*/_arg?value

Then create a lambda page in System42’s CMS, and make sure you set its “template” settings to “empty”, before you paste in the following code.

create-widget
  class:container
  oninit
    p5.web.include-css-file:@MICRO/media/main.css
    p5.web.include-css-file:@MICRO/media/skins/serious.css
  widgets
    div
      class:row
      widgets
        div
          class:col bg shaded rounded
          widgets
            micro.widgets.grid:my-grid
              columns
                Name
                Email
                Phone
              oninit
                micro.samples.widgets.grid-1.databind:my-grid
                  item
                    Name:Thomas Hansen
                    Email:thomas@gaiasoul.com
                    Phone:90909090
                  item
                    Name:John Doe
                    Email:john@doe.com
                    Phone:91919191

By extending the existing databind event in Micro for the [micro.widgets.grid] extension widget, we are able to create our own “custom datagrids”, which allows us to databind our grid with simple data-statements, that will still create a complex widget hierarchy for us.

This allows us to avoid repetition, and our code becomes what’s often referred to as “DRY” – Don’t Repeat Yourselves. In lates blogs, I will demonstrate how to extend the actual grid, to make sure it has specialised columns, that can for instance be clicked, etc.

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