The DBGrid is a powerful component to display data in many forms. The easiest way to start is by using the wizard, and then configure it to your needs. The implementation makes use of the bootstrap-table (https://bootstrap-table.com/). It is not a full implementation of all the whistles and bells, but comes close. As there are many samples on the website and watching them shows how to configure the several options. 

Properties


Description

Autorefresh

Only valid when there is a crud form attached. If enabled then the grid will refresh after update the form. 

ClickToSelect

Will enable check-boxes before each row to select rows for further processing.

Data

A number of options to set the data properties. Samples can be found at the bootstrap-table website 

DataDetailBuildingBlock

Used for nested grids. Drop-down references the available data-blocks.

DataDetailView

Allows to view a row as a detail

DataDetailViewAsClick

Implements a click event for switching between row and detail

DataDetailViewicon

Applies an icon to show the row as a data block

DataGroupBy

Groups the elements of the grids 

DataGroupByTitle

Title above the group

DataGroupByToggle

Expands or collapse the group by clicking the title row

DataGroupByIcon

Shows the collapse icon in the row.

DataHeight

Defines the height of the data column. Leave empty if you want to comply to Bootstrap

DataIDField

Identifies the unique field in the grid 

DataMaxLocalRows

Limits the result of the grid 

DataReordableColumns

If set, the end-user can reorder the columns.

DataSidePagination

Client/Server. If set to client then the full result set will be sent to the browser, allowing a fast page-change experience. Server will only send the displayed data. Slower, but better on large result sets. By default the value is set to client. 

DataSortName

Initial field to sort the grid by default.

DataSortOrder

Ascending or Descending

DataSource

Reference to the data source component that references the database data

DataStickyHeader

Set the column header fixed on large result set.

Editable

Properties to maintain the editable options. These options should not be used in conjunction with a popup modal form

EditableAddBtnClass

Bootstrap Button Class of the add button 

EditableAddBtnIcon

Font awesome icon

EditableAddBtnRounded

Creates a rounded button

Editable AddBtnTitle

Title of the button

EditableApplyBtnClass

Bootstrap Button Class of the add button 

EditableApplyBtnIcon

Font awesome icon

EditableApplyBtnRounded

Creates a rounded button

EditableApplyBtnTitle

Title of the button

EditableCancelBtnClass

Bootstrap Button Class of the add button 

EditableCancelBtnIcon

Font awesome icon

EditableCancelBtnRounded

Creates a rounded button

EditableCancelBtnTitle

Title of the button

EditableGrid

Enables the grid for use as editable grid.

Fields

Opens property editor for configuring the grid fields.

FloatingHeight

Enables dynamic grid sizing

Form

Owner of the component

HidingLoadingMessage

If set then the load icon will not be displayed.

MasterGrids

Suppresses the rebuild of the master grids when the content or selection of the current grid changes. 

Modal

Defines a modal form (usually for a crud form)

ModalButtonClass

Label of the field

ModalButtonMargin

Label above or before the field

ModalButtonPadding

Data field for filling lookup fields

ModalButtonTitle

Key field, to lookup description

ModalIcon

Key fields for mapping to external table

ModalIconBackground

Method to search from (full search, or based upon result set)

ModalIconMargin

Margin around the icon

ModalIconPadding

Padding around the icon

ModalRoundBtn

Show as a round button

ModalTarget

The Modal form that is bound to the popup

OnPageChangeDoRefresh

Refreshes database query when the page changes

OnRowSelectDoRefresh

Refreshes database query when a record is selected (turn of when you use an editable grid)

PageList

Set to the page sizes a user can select from, separated with a comma.

PageSize

Default page size (from the page list)

ProcessButtonClass

Bootstrap Class for the process button (used for processing selected rows)

ProcessButtonTitle

Title for the process button class

SelectedRowBGClass

Bootstrap class for the selected row foreground

SelectedRowFGClass

Bootstrap class for the selected row background

SelectedItemName

obsolete

ShowColumns

Show the column titles

ShowExport

Show the export button

ShowExportFileTypes

Show the export file types

ShowOptions

Options for the standard grid buttons (ShowHeader, ShowFooter, ShowSearch, ShowRefresh, ShowPagination, ShowToggle, ShowFullScreen, ShowColumns)

ShowRowStyle

Shows the row in the selected row style.

SingleSelect

Will allow only one record to be selected at any time. Use in combination of the click-to-select options. The record can be processed with the ProcessButton

TableClasses

Grid table classes: (bordered, hove, striped, dark, sm (small rows), borderless)

TableHeaderClass

Bootstrap class for the table header.

UniqueId

Unique field of the grid. This field is required to set the primary key for Crud operations.

UserButtons

Dialog to add User Buttons to the grid to perform configurable tasks.

Fields property

There are a few different types of fields properties. The first one is the standard database field property. Other types can be custom fields that can contain user defined data




Description

Aggregate

Column for displaying role of the row (SUM/COUNT etc.)

Label

Label field

Image

Image field (allows linking to other modules)

dbField

Regular database field

Modal

Applies open button for a modal form

DeleteButton

Applies a column for delete operations

EditButton

Applies a column for edit operations

Label field        


Description

FieldType

Label field

Label

Label of the column.

Value

Value of the rows

Visible

Field is visible or not

Image field


Description

ApplicationLink

Links column to another module

CloudConnector

Defines the cloud connector to pass defined cloud variable to the linked application

FieldType

Image field

FormCommand

Command to send to the modal form

Image

Reference to image or icon

InitialFormMode

Initial form mode of the modal or linked form (none, add, edit, delete) 

Label

Label of the column

ModalTarget

Reference to the modal form (if any)

Visible

Field is visible or not

modal field


Description

FieldType

Modal

FormCommand

Command to send to the modal form

Image

Reference to image or icon

InitialFormMode

Initial form mode of the modal or linked form (none, add, edit, delete) 

Label

Label of the column

ModalTarget

Reference to the modal form

Visible

Field is visible or not

edit/delete btn



Description

FieldType

Edit/delete

Image

Reference to image or icon

Label

Label of the column

ModalTarget

Reference to the modal form

Visible

Field is visible or not


Database field (cDBField)


Description

DataAlign

Alignment of the data

DisplayFormat

Output format according to PHP standards

Editable

Defines the field as editable (default text)

EditableOptions

Defines the editable properties of a field

FieldType

cDBField

FormRange

Allows transformations like %Y to get the year of a date

FormSearch

Use the field in search form (expandable form that will be put on the top of the grid)

FormSearchOptions

Opens property editor to format the search form 

Functions

Defines additional rows for functions like MIN, MAX, COUNT, etc.

GroupBy

Select group by field

Order

Order of the field

PrimaryKey

Set to true if the field is used as Primary Key (default yes on db fields that are (part of the) primary key

RefinedRange

Allows transformations like %Y to get the year of a date

RefinedSearch

Special pre-cooked search form on the left column that allows to search on grouping. It works on the resultset

Searchable

Include this field in the generic search box

Sortable

Make the field sort-able

SortOrder

Sort order of the field

Title

Title of the field

TitleAlign

Alignment of the title

Visible

Make the field visible/invisible (Key values are always require for a good function, but you don' t want them to be visible)


Editable options

If you use field type 'select' then you need to set the database fields.


Description

DataSource

Data source of the reference field

DBConnection

Connection to be used for the lookup

DBDateFormat

Format of the date internally

DBViewFormat

Visual format of the date

EditFieldType

Type of field (text, textarea, select, date, datetime, combodate)

Items

Fixed items (see dbdropdown component)

KeyFields

Mapping of the field to the external table 

LookupDataField

Field to display

PlaceHolder

Text for empty fields

Table

The table for lookup

TaRows

The number of rows for the drop down field

TxClearButton

Show a button to clear the fields content


PHP Events



Description

OnActivate

Triggers when all components are created

OnAfterRender

Triggers after the grid is rendered

OnBeforeRender

Triggers before the grid is rendered

OnClickRow

Triggers when a row is clicked

OnClickUserButton

Triggers when a user button is clicked

OnCreate

Triggers when the component gets created

onDestroy

Triggers when the component is destroyed

onDetailFormatter

Triggers when the component requires formatting

onEachRow

Triggers on each row, before displaying (can be used to modify data before viewing)

onEndprocessRows

Triggers when the processing of selected rows is finished

onGetRefinedSearchLabel

Retrieves label information

onGetReorderColumns

Triggers to retrieve positioning of the grid columns

onProcessRow

Triggers on each selected (checked) row.

onSetReorderColumns

Triggers to save positioning of the grid columns

JavaScript Events        


Description

onClickRow

Triggers when the user clicks the button. Clicking leads to an ajax call to the server event onClick

onDocumentReady

Required to let the grid function

onLoadSuccess

Triggers after the grid has loaded its data

onPageChange

Triggers when the page changes

onRefresh

Triggers when the grid requires a refresh

onRowChecked

Triggers when a row is selected.