cDBGrid
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. |