The DataGrid widget displays records in a tabular form with each attribute in its own column, much like a spreadsheet.


  • UI Type:

Extends: BaseWidget

Properties

Name Desciption
Auto HeightAutomatically adjust the height by looking at the number of records.
DisabledThe widget cannot be used.
Drag & Drop RowsAllow drag & drop reordering of rows. This requires the connected datamodel to have a float-type attribute for controlling the order.
Enable SortingLet the user control by what column records are ordered by double-clicking on column-headers.
Fetch Nested DataFetched data includes related records.
HiddenHides the widget from the user.
Hide HeaderHides the DataGrid's header row.
Locked ColumnsSelect the number of columns (starting from the left) that should be fixed in place when scrolling horizontally in the DataGrid.
MaximizeSet this widget to be maximized (take up all available space).
Multi SelectMultiSelect enables selecting multiple records of a datagrid. It shows the checkboxes against each record and one can select multiple records at a time.
QueryUsing a query you can filter out the specific records you want to display in the grid.
Resizable ColumnsLet the user resize column-widths by dragging.
Row DecoratorThis function will be called when rendering a row and can be used to inject custom HTML style into the row.
Row SelectionLet the user select individual rows.
Storage ModeTo store the data of the datagrid in cloud or locally in the device of the user.
SummaryDisplays a summary at the bottom of the DataGrid.
Tab IndexThe Tab Index is an integer that tells the order of the widget when using the tab-key to move from one widget to another.
Use TransactionsChanges to records will not be immediately saved.

Style

Name Desciption
Background image for gridSelect a background image for the element. You can upload or choose from image library.
Background-colorChange background color of the widget.
Body border colorThe color of the border for the main table.
Body border styleThe style of the border whether solid, dotted or dashed.
Body border widthThe width of the border for the main table.
Body text boldnessThe font weight of the text content of the table.
Body text colorThe text color for the table body values.
Cell Border colorThe border color for the cells of the table.
Cell border widthThe border width for the cells of the table.
Cell padding (right left)Generate space at the left and right area in each cell of the table.
Cell padding (top bottom)Generate space at the top and bottom area in each cell of the table.
ColorColor of the text inside the widgets. May not apply to all text inside all widgets.
Editable cell hover background colorSets color for editable columns, which appears on hover.
Editable cell hover border colorSets border color for editable columns, which appears on hover.
Font SizeSet the font size in pixels for text.
Head background colorThe background color for table header row.
Head column hover colorThe background color on hover for table header row.
Header text boldnessThe text weight or boldness for the table header values.
Header text colorThe text color for the table header values.
Row background colorThe background color for the rows of the table.
Row border radiusAdd border radius to the corners of each row of the table.
Row hover background colorThe background color on hover for the rows of the table.
Row hover colorSets color for row, appears on hover.
Row margin (top bottom)Generate space between the rows of the table.
Row vertical alignmentThe row content alignment whether top, middle or bottom.
Summary background colorSets background color of summary.
Summary font sizeSets font size of summary.
Summary text boldnessThe font weight of the text content in the footer of the table.
Summary text colorThe color of the text in the table footer row.
Table body borderThe border color for the main table.
Table cell borderEnable to have borders for the cells of the table.
Text-alignmentSet left, centered or right. Applies both to icon and text.
Transparent backgroundEnable to make the background color of the widget transparent.

Events

Name Description Event Attribute
AfterEdit This event is triggered after an edit is done in the content of any editable cell in the datagrid.
event This event is triggered after an edit is done in the content of any editable cell in the datagrid.
BeforeEdit This event is triggered before an edit is done in the content of any editable cell in the datagrid.
event This event is triggered before an edit is done in the content of any editable cell in the datagrid.
Blur Event when a widget goes out of focus
event The event that gets triggered when the user "leaves" an element.
CellChange Triggered when a value in a cell has finished changing
event Object containing the record (event.record) and the column (event.column) that was changed
CellClick Triggered when a cell is clicked on the data table
event Object containing the record (event.record), column name (event.columnName) and column index (event.columnIndex) that was clicked
Click Event that triggers based on touch or click
event The event that triggered the handler
DblClick Event that triggers based on double click
event The event that triggered the handler
Focus Event when indicating/ highlighting widget using the cursor
event Focus is the event that gets triggered when a user makes an element come into focus, by clicking on it.
RowClick Event triggered when a row is clicked or tapped.
event Object containing the record (event.record) in the row that was clicked
RowDblClick Triggered when a user double clicks on a row
event Object containing the record (event.record) in the row that was clicked
RowDelete Triggered after a row is deleted by the user
event Object containing the record id (event.rowId) of the row that was deleted
Selection Event triggered when row is selected and deselected
Update Triggered when the element has been updated
event Object containing the record (event.record) and the column (event.column) that was changed

Function

copyToClipboard ( )

setColumnValueOptions ( )

setStorageMode ( )

getStorageMode ( )

addRecord ( item: Record , opts: Object )

Adds the specified record to the DataGrid.

Parameters
Name Type Description
item Record The record to add.
opts Object Optional options object with callbacks for when the operation is done.
Properties
NameTypeDescription
onSuccessFunctionCallback function if the operation was successful.
onErrorFunctionCallback function if the operation resulted in an error.

blur ( )

Triggers the blur event.

commit ( )

Saves changes made to the records held by the DataGrid.

deleteRecord ( item: Record , opts: Object )

Deletes the specified record from the DataGrid

Parameters
Name Type Description
item Record The record to delete.
opts Object Optional options object with callbacks for when the operation is done.
Properties
NameTypeDescription
onSuccessFunctionCallback function if the operation was successful.
onErrorFunctionCallback function if the operation resulted in an error.

deselectAll ( )

Deselects all rows.

deselectRows ( rowNumbers: Array<Number> )

Deselects the specified rows.

Parameters
Name Type Description
rowNumbers Array<Number> The numbers of the rows to deselect (starting at row 0 at the top).

enableEdit ( enable: Boolean )

Enables or disables editing of the DataGrid's cells.

Parameters
Name Type Description
enable Boolean Specifies whether to enable or disable editing.

focus ( )

Triggers the focus event.

get ( name: String ) { Object }

Gets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
Returns

The property's value.

getActiveRecord ( ) { Record }

Returns the currently selected record.

Returns

The currently selected record.

getActiveRecordID ( ) { ID }

Returns the ID of the currently selected record.

Returns

The ID of the currently selected record.

getAllRecords ( opts: Object ) { Array<Record> }

Returns all of the DataGrid's records.

Parameters
Name Type Description
opts Object Optional options object configuring the operation.
Properties
NameTypeDescription
loadBooleanIf true, will attempt load records from the database in addition to the currently displayed records.
sortBooleanEnables sorting of records received from the database (note: requires opts.load to be true).
onSuccessFunctionCallback function if the load operation was successful (note: requires opts.load to be true).
onErrorFunctionCallback function if the load operation resulted in an error (note: requires opts.load to be true).
Returns

Array holding all of the DataGrid's records. If opts.load is enabled, this will return null and the records will be returned through the callback functions instead.

getColumns ( ) { Array }

Returns the DataGrid's columns.

Returns

An array holding all of the DataGrid's columns

getId ( ) { ID }

Returns the ID of the widget.

Returns

The ID of the widget

getQuery ( ) { Query }

Returns the query used to populate the DataGrid

Returns

The query used to populate the DataGrid

getRecord ( id: ID )

Returns the record with the specified id.

Parameters
Name Type Description
id ID ID of the desired record.

getSelectedRecords ( idsOnly: Boolean ) { Array<Record> | Array<ID> }

Returns the currently selected records.

Parameters
Name Type Description
idsOnly Boolean If true, only ID's will be returned.
Returns

An array holding the currently selected records, or an array holding the ID's of the currently selected records (if idsOnly was true).

getValue ( ) { Object }

Returns the widget's value.

Returns

The widget's value.

hide ( )

Hides the widget.

isEnabled ( ) { Boolean }

Returns true if the widget is enabled.

Returns

True if enabled, otherwise false.

isHidden ( ) { Boolean }

Returns true if the widget is hidden.

Returns

True if hidden, otherwise false.

isRowSelected ( rowId: String ) { Boolean }

Checks if a row is currently selected.

Parameters
Name Type Description
rowId String The id of the row to check.
Returns

True if the row is selected, false otherwise.

newRecord ( item: Object )

Creates a new record using the specified data.

Parameters
Name Type Description
item Object Data to use for the new record.

refresh ( )

Refreshes the DataGrid

rollback ( )

Reverts changes made to the records held by the DataGrid.

selectAll ( )

Selects all rows.

selectRows ( rowNumbers: Array<Number> )

Selects the specified rows.

Parameters
Name Type Description
rowNumbers Array<Number> The numbers of the rows to select (starting at row 0 at the top).

set ( name: String , value: Object )

Sets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
value Object The new value.

setColumnHeader ( colId: Number , header: String )

Changes the header text of a column

Parameters
Name Type Description
colId Number 0 based index of the column or the columns current header text
header String The new header text for the column

setEnabled ( Enabled: Boolean )

Enables/disables the widget.

Parameters
Name Type Description
Enabled Boolean True to enable the widget, false to disable.

setQuery ( query: Query )

Sets the query used for fetching records into this grid

Parameters
Name Type Description
query Query query The query to use

setRecords ( records: Array<Record> ) { Promise }

Sets the records displayed by the DataGrid to the specified array of records.

Parameters
Name Type Description
records Array<Record> records The records to display.

setRowData ( rowId: String , data: Object )

Sets the data of the specified row.

Parameters
Name Type Description
rowId String The id of the row to change.
data Object The new data.

setStyle ( Object: Object )

Set the widget-style

Parameters
Name Type Description
Object Object properties

setValue ( value: Object )

Sets the widget's value.

Parameters
Name Type Description
value Object The new value.

show ( )

Shows the widget.

toggleCellHighlight ( colId: Number , highlightStyle: Object )

Toggles highlight of a cell in the currently active row

Parameters
Name Type Description
colId Number 0 based index of the column or the columns current header text
highlightStyle Object Style object to use as the highlight for the cell

updateRecord ( record: Record )

Update a record in the grid

Parameters
Name Type Description
record Record record The record to be updated.