DataGrid - Appivo Documentation

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

UI Type:

Properties 18
Style 33
Events 13
Functions 42

Properties

Name	Desciption
Auto Height	Automatically adjust the height by looking at the number of records.
Disabled	The widget cannot be used.
Drag & Drop Rows	Allow drag & drop reordering of rows. This requires the connected datamodel to have a float-type attribute for controlling the order.
Enable Sorting	Let the user control by what column records are ordered by double-clicking on column-headers.
Fetch Nested Data	Fetched data includes related records.
Hidden	Hides the widget from the user.
Hide Header	Hides the DataGrid's header row.
Locked Columns	Select the number of columns (starting from the left) that should be fixed in place when scrolling horizontally in the DataGrid.
Maximize	Set this widget to be maximized (take up all available space).
Multi Select	MultiSelect enables selecting multiple records of a datagrid. It shows the checkboxes against each record and one can select multiple records at a time.
Query	Using a query you can filter out the specific records you want to display in the grid.
Resizable Columns	Let the user resize column-widths by dragging.
Row Decorator	This function will be called when rendering a row and can be used to inject custom HTML style into the row.
Row Selection	Let the user select individual rows.
Storage Mode	To store the data of the datagrid in cloud or locally in the device of the user.
Summary	Displays a summary at the bottom of the DataGrid.
Tab Index	The 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 Transactions	Changes to records will not be immediately saved.

Style

Name	Desciption
Background image for grid	Select a background image for the element. You can upload or choose from image library.
Background-color	Change background color of the widget.
Body border color	The color of the border for the main table.
Body border style	The style of the border whether solid, dotted or dashed.
Body border width	The width of the border for the main table.
Body text boldness	The font weight of the text content of the table.
Body text color	The text color for the table body values.
Cell Border color	The border color for the cells of the table.
Cell border width	The 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.
Color	Color of the text inside the widgets. May not apply to all text inside all widgets.
Editable cell hover background color	Sets color for editable columns, which appears on hover.
Editable cell hover border color	Sets border color for editable columns, which appears on hover.
Font Size	Set the font size in pixels for text.
Head background color	The background color for table header row.
Head column hover color	The background color on hover for table header row.
Header text boldness	The text weight or boldness for the table header values.
Header text color	The text color for the table header values.
Row background color	The background color for the rows of the table.
Row border radius	Add border radius to the corners of each row of the table.
Row hover background color	The background color on hover for the rows of the table.
Row hover color	Sets color for row, appears on hover.
Row margin (top bottom)	Generate space between the rows of the table.
Row vertical alignment	The row content alignment whether top, middle or bottom.
Summary background color	Sets background color of summary.
Summary font size	Sets font size of summary.
Summary text boldness	The font weight of the text content in the footer of the table.
Summary text color	The color of the text in the table footer row.
Table body border	The border color for the main table.
Table cell border	Enable to have borders for the cells of the table.
Text-alignment	Set left, centered or right. Applies both to icon and text.
Transparent background	Enable 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

Name	Type	Description
`onSuccess`	Function	Callback function if the operation was successful.
`onError`	Function	Callback 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

Name	Type	Description
`onSuccess`	Function	Callback function if the operation was successful.
`onError`	Function	Callback 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

Name	Type	Description
`load`	Boolean	If true, will attempt load records from the database in addition to the currently displayed records.
`sort`	Boolean	Enables sorting of records received from the database (note: requires opts.load to be true).
`onSuccess`	Function	Callback function if the load operation was successful (note: requires opts.load to be true).
`onError`	Function	Callback 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.