AgGridView

Label: :IA_Function
Property: type: AgGridView
Inherits from: Function and View

An advanced grid view based on ag-Grid.

Function parameters

Key Description Default value Possible values
autoSizeColumns Autosizes columns to show the whole content of the cells false true or false
options* Object of grid properties that will be passed to ag-Grid. Object
resizeColumnsToFit Autosizes columns to fit the width of the table false true or false
state.selected List of rows that are selected Array of objects

* All options from the ag-Grid documentation can be used. Do note that:

  • Options that require an array of objects can be set with the Graphileon dot notation, for example: columnDefs requires an array of column definition objects. They can be set using (for example):
"$options.columnDefs.myFirstColumn.field": "name",
"$options.columnDefs.myFirstColumn.headerName": "Name",
"$options.columnDefs.anotherColumn.field": "age",
"$options.columnDefs.anotherColumn.headerName": "Age"

This is equivalent to:

"$options.columnDefs": "[{field: 'name', headerName:'Name'}, {field:'age', headerName:'Age'}]",
"$options.columnDefs:evaluate": "full"

Action buttons

AgGridView uses a custom ag-Grid Cell Renderer for action buttons. If a columnDef's cellRenderer is set to actionButtonRenderer, it will render an action button in that column. Clicking the button will fire an action trigger.

Parameters:

Key Description Default value Possible values
icon FontAwesome icon to show on the button. String
label Text show on the button String
name Name of the action. Will be included in the Trigger event, so the clicked button can be identified. ``
style Type of button default default, primary, info, success, warning, danger, link
show Specifies if the button is displayed or not. (rowData)=>boolean / true / boolean

Example

"$options.columnDefs": [{
    field: 'myActionButton', 
    headerName:'Button',
    cellRenderer: 'actionButtonRenderer',
    cellRendererParams:{
        icon: 'pencil', // FontAwesome icons
        label: 'Edit', 
        name: 'edit', 
        style: 'info' // default, primary, info, success, warning, danger, link
    } 
}],

Outgoing triggers

Type: cellClicked

Occurrence: When the user clicks a cell

Additional event properties (besides the inherited properties):

Key Description Possible values
value The value inside the clicked cell any
column The name of the column of the clicked cell string

Type: cellDoubleClicked

Occurrence: When the user double-clicks a cell.

Additional event properties (besides the inherited properties):

Key Description Possible values
value The value inside the clicked cell any
column The name of the column of the clicked cell string

Type: rowClicked

Occurrence: When the user clicks a row.

Additional event properties (besides the inherited properties):

Key Description Possible values
data The data in the clicked row object
rowIndex The index of the clicked row number

Type: rowDoubleClicked

Occurrence: When the user double-clicks a row.

Additional event properties (besides the inherited properties):

Key Description Possible values
data The data in the clicked row object
rowIndex The index of the clicked row number

Type: cellValueChanged

Occurrence: When the user edits the value in a cell.

Additional event properties (besides the inherited properties):

Key Description Possible values
value The new value of the cell any
column The name of the column of the cell string
oldValue The old value in the cell any
newValue The new value in the cell any

Type: rowValueChanged

Occurrence: When the user changes the value in a row (co-occurs with cellValueChanged).

Additional event properties (besides the inherited properties):

Key Description Possible values
data The new data in the row object
rowIndex The index of the row number

Type: rowDragEnter

Occurrence: When the user starts dragging a row.

Additional event properties (besides the inherited properties):

Key Description Possible values
data The data of the dragged row object
over The data of the row the dragged row is being hovered over object
overIndex The index of the row the dragged row is being hovered over number

Type: rowDragLeave

Occurrence: When the user drags a row outside of the grid.

Additional event properties (besides the inherited properties):

Key Description Possible values
data The data of the dragged row object
over The data of the row the dragged row is being hovered over object
overIndex The index of the row the dragged row is being hovered over number

Type: rowDragEnd

Occurrence: When the user drops a dragged row.

Additional event properties (besides the inherited properties):

Key Description Possible values
data The data of the dragged row object
over The data of the row the dragged row is being dropped over object
overIndex The index of the row the dragged row is being dropped over number

Type: action

Occurrence: When the user clicks an action button

Additional event properties (besides the inherited properties):

Key Description Possible values
target.data The data of the clicked row object
target.rowIndex The index of the clicked row number
name The name of the action button string

Type: context

The following context menus are available from the AgGridView:

Menu Occurs when Target value
cell User right-clicks a cell Object with value (cell value) and row (row data)

More info on context menus.