The first of the display mechanisms is the datagrid. The administrative system makes frequent us of a grid to display tabular data. Cliqon differentiates between a grid and table only in the sense that Cliqon uses the 3rd Party javascript library from Gijgo as it is Bootstrap 4 compatible, versatile and relatively easy to configure. It performs well in narrow columns and on popup dialogues, both of which are an essential element of the Cliqon admin system. It is compatible with Vue. Therefore, it is a better tool to integrate into Cliqon than other 3rd Party libraries that we have used in past editions of Cliqon. None the less as the months progress, we do expect to replace Gijgo datagrid with a datagrid of our own authorship, as we have already done with the datatable.

Grid configuration

The following paragraphs and code examples will explain how we configure and implement the Gijgo grid to meet the needs of Cliqon. For a full explanation of the facilities provided by Gijgo, please visit

Service record

Starting with the Service record for "datagrid" in our ubiquitous TOML format.

primaryKey = 'id'

autoLoad: 'true'

uiLibrary = 'bootstrap4'

iconsLibrary = 'fontawesome'

headerFilter.type = 'onchange'

fontSize = '14px'

notFoundText = '144:No records available'


limit = 15

rightControls = false

sizes.0 = 10

sizes.1 = 15

sizes.2 = 20


       icon = 'pencil'

       formid = 'columnform'


       icon = 'eye'

       formid = 'columnform'


       icon = 'trash'

The keys (as far as [rowicons]) will obviously be exactly the same as those used and described in the Properties section of the Gijgo documentation. You will note how as the datagrid configured for the Admin system uses the Bootstrap4 theme and Fontawesome 4.7 icons. Note how the value for the key "notFoundText" is a Admin or Dbcollection String reference. This will be converted by the Datagrid display Method in framework/app/Admin.php to the administrative language string.

The Rowicons array keys and values dictate the standard set of icons displayed for each row on a grid. The possible definition for each rowicon consists of:

    • the key = is converted to the action for the icon as a button or link
    • icon = the significant part of a Fontawesome icon (as in fa-pencil)
    • formid = if a click on the icon invokes a form, which type of form will it be - column, popup or page? (columnform, popupform or pageform respectively)

Clicking on an icon, invokes the Javascript Cliq method or function, rowButton().

Collection record

Now we move to look at a Collection record that uses the the Datagrid for some of its Models. For the Cliqon Production system, only Dbcollection currently has a Datagrid section. It contains:

; Config File for a Gijgo Grid


       dataurl = ''



               field = 'id'

               title = '9999:Id'

               headerCssClass = 'strong'

               width = '50'

               filterable = false

               align = 'right'

               order = 'a'

               ; cssClass = ''

               sortable = false

               tooltip = '9999:Id'

       ; Top buttons


               class = 'danger'

               icon = 'plus'

               title = '100:Add'

               formid = 'columnform'

               formtype = 'columnform'

               order = 'a'




               class = 'info'

               icon = 'info'

               title = '85:Help'

               order = 'x'

There are two sections worth noting. In Dbcollection, we configure the first column (0) of the Datagrid, which is, not surprisingly, the Id. Again, the nomenclature of the keys is determined by the requirements of a Gijgo column property. As explained in the previous sub-section, the language string for title and tooltip are extended by the Datagrid Method in Admin.php.

The second section sets the Array for the Topbuttons Method, which is common to all Templates in the Admin system and thus appears callable Method in Cliq.Php. Top buttons are displayed by the Template engine and are outside of the scope of this sub section. Top buttons are explained in the parent for this sub-section.

Model Record

Model records are currently displayed in a datacard format, so that the actions can appear in a popup dialog which is larger than a column form. We do this partly because the Models tend to contain more TOML values as opposed to their parents and are likely to be edited more frequently.

Let us look at the Datagrid entries in the Model for Administrative strings which is a Tabletype called "string"within the Table Dbcollection.

; Datatable array must be set for straight entries


       dataurl = '/ajax/{common.lcd}/getgriddata/dbcollection/string/'

       pager.limit = 15


               field = 'c_reference'

               title = '5:Reference'

               width = '80'

               order = 'b'

               sortable = true


               field = 'c_common'

               title = '6:Common'

               order = 'c'

               sortable = tru


               class = 'primary'

               icon = 'flag'

               title = '61:Reports'

               dropdown = true

               order = 'b'


                       title = '27:Strings'

                       type = 'allstrings'


               class = 'default'

               icon = 'cogs'

               title = '70:Utilities'

               dropdown = true

               order = 'c'


                       title = '452:Check missing'

                       type = 'popup'

At Model level, we provide the URL which the Datagrid will invoke to obtain the data for the Grid. We change the Default page length from 10 to 15, as the tabletype string does not create Grid cells with a lot of content that will produce multiple lines.

Also, at this level we configure the rest of the Datagrid columns after column 0 for the Id.

Of particular note is how the Topbuttons array, configures two drop down buttons with their respective initial dropdown menu entries.

Created with the Personal Edition of HelpNDoc: Free HTML Help documentation generator