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:email@example.com Phone:90909090 item Name:John Doe Email:firstname.lastname@example.org 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.