Power Grid
(part of package 'Servoy NG-Grids') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent
Power Grid is an editable table component providing advanced functionality such as row grouping, pivoting, summaries and powerful analytics. It's data is loaded from a JSDataSet, and the changed data (if it is edited) can be exported back as a dataset.
This is a reference page; many components have detailed usage guides here.
Properties
arrowsUpDownMoveWhenEditing
Defines action on TEXTFIELD editor for up/down arrow keys
Type: string
columns
List all columns to be used in table as dataprovider
Type: column[]
columnsAutoSizing
Auto sizing for columns. SIZE_COLUMNS_TO_FIT: make the currently visible columns fit the screen. AUTO_SIZE: the grid will work out the best width to fit the contents of the 'visible' cells in the column. NONE: no auto sizing action performed
Type: string Default Value: null
columnsAutoSizingOn
Apply 'columnsAutoSizing' for these events even if 'continuousColumnsAutoSizing' is false
Type: columnsAutoSizingOn
continuousColumnsAutoSizing
Apply 'columnsAutoSizing' whenever columns width are changed
Type: boolean Default Value: false
editNextCellOnEnter
Type: boolean Default Value: false
enableColumnResize
Type: boolean Default Value: true
enableSorting
Enable column sorting by clicking on the column's header
Type: boolean Default Value: true
enabled
Type: enabled Default Value: true
gridOptions
Map where additional grid properties of ag-grid can be set
Type: json
groupMaxWidth
Type: int
groupMinWidth
Type: int Default Value: 200
groupRowRendererFunc
Function to customize group row rendering when gridOptions.groupUseEntireRow is set to true
Type: clientfunction
groupStyleClass
Type: styleclass
groupWidth
Type: int Default Value: 200
headerHeight
Type: int Default Value: 33
iconConfig
Type: iconConfig
isEditableFunc
Callback that returns the editable state of a cell.
Type: clientfunction
localeText
Map where locales of ag-grid can be set
Type: map
mainMenuItemsConfig
Type: mainMenuItemsConfig
multiSelect
Type: boolean Default Value: false
onDragGetImageFunc
Called when row(s) drag-n-drop is started, to get the drag image as an html code.
Type: clientfunction
onDragOverFunc
Callback when dragging over a row - returns one of the strings: 'copy', 'move', 'none' depending on the allowed drag operation.
Type: clientfunction
pivotMode
Pivoting allows you to take a columns values and turn them into columns
Type: boolean Default Value: false
readOnly
Type: boolean Default Value: false
responsiveHeight
Table's height to be set in a responsive form. When responsiveHeight is set to 0, the table will use 100% height of the parent container
Type: int Default Value: 300
rowHeight
The height in pixels of the table's rows
Type: int Default Value: 25
rowStyleClassFunc
Function to add style class to row
Type: clientfunction
showColumnsMenuTab
Type: boolean Default Value: false
styleClass
Type: styleclass Default Value: "ag-theme-alpine"
tabSeq
Type: tabseq
toolPanelConfig
Type: toolPanelConfig
useLazyLoading
Type: boolean Default Value: false
visible
Type: visible
Events
onCellClick
Called when the mouse is clicked on a row/cell
Parameters:
rowData object columnId string cellData object event JSEvent
onCellDoubleClick
Called when the mouse is double clicked on a row/cell
Parameters:
rowData object columnId string cellData object event JSEvent
onCellRightClick
Called when the right mouse button is clicked on a row/cell
Parameters:
rowData object columnId string cellData object event JSEvent
onColumnDataChange
Called when the columns data is changed
Parameters:
rowindex int columnindex int oldvalue object newvalue object event JSEvent rowData object
Returns: boolean
onColumnFormEditStarted
Called when the column's form editor is started
Parameters:
onColumnStateChanged
Called when the columns state is changed
Parameters:
onDrop
Called when a row is dropped as a result of a drag-n-drop
Parameters:
onFooterClick
Called when the mouse is clicked on a footer cell
Parameters:
onLazyLoadingGetRows
Called when lazy loading is used, and new rows are requested to display
Parameters:
startRow long endRow long rowGroupCols columnVO[] valueCols columnVO[] pivotCols columnVO[] pivotMode boolean groupKeys string[] filterModels filterModelVO[] sortModels sortModelVO[]
onReady
Called when the table is ready to be shown
onRowGroupOpened
Called when group is opened/closed
Parameters:
groupcolumnindexes int[] groupkeys object[] isopened boolean
onRowSelected
Called when the mouse is clicked on a row/cell
Parameters:
API
addAggCustomFuncs
Add custom aggregate functions. Ex.: addAggCustomFuncs({ myAggregate: '(function (valuesArray) { return myAggValueNumber })'})
@param {Object} aggFuncs object with properties names the aggregates name, and values the custom function as string
Parameters:
aggFuncs map
appendLazyRequestData
When useLazyLoading is set, this method is used to append the new rows to the table from inside the onLazyLoadingGetRows callback.
The new rows are passed using a dataset.
"lastRowIndex" specifies the index of the last row on the server; if not set, the lazy loading will behave like an infinite scroll, and onLazyLoadingGetRows will be called called until "lastRowIndex" will be set
@param {JSDataSet} dataset @param {Number} lastRowIndex
Parameters:
autoSizeAllColumns
deleteColumn
Removes column with id
@param {String} id
Parameters:
id string
deleteRows
Delete rows - in order to work, pks needs to be set using renderData, and the rowsKey objects needs to have pk
@param {Array<Object>} rowsKey delete rows
Parameters:
rowsKey object[]
editCellAt
Start cell editing (only works when the table is not in grouping mode).
@param rowindex row index of the editing cell (0-based) @param columnindex column index in the model of the editing cell (0-based)
Parameters:
exportData
Export data to excel format (xlsx)
@param {String} fileName @param {Boolean} skipHeader @param {Boolean} columnGroups @param {Boolean} skipFooters @param {Boolean} skipGroups @param {Boolean} asCSV
Parameters:
fileName string (optional) skipHeader boolean (optional) columnGroups boolean (optional) skipFooters boolean (optional) skipGroups boolean (optional) asCSV boolean (optional)
exportToDataset
Returns: dataset
getAllColumns
Returns all the columns
@return {Array<column>}
Returns: column[]
getColumn
Gets the column with id. If changes will be made on the returned column, it should be called with forChange set to true
@param {String} id @param {Boolean} forChange @return {column}
Parameters:
Returns: column
getColumnState
Returns the current state of the columns (width, position, grouping state) as a json string that can be used to restore to this state using restoreColumnState
@return {String}
Returns: string
getExpandedGroups
Returns currently expanded groups as an object like: {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
@return s {Object}
Returns: object
getSelectedRows
Gets selected rows data
@return {Array<String>}
Returns: object[]
isPivotMode
Returns pivot mode state
Returns: boolean
moveColumn
Move column
@param id column id @param index new position (0-based)
Parameters:
newColumn
Adds new column at specified index. Index is 0 based.
@param {String} id @param {Number} [index] 0-based index @return {column}
Parameters:
Returns: column
newRows
Create new rows
@param {Array<Object>} rowsData new rows @param {Boolean} appendToBeginning if true rows will be added to the beginning of the table
Parameters:
renderData
Fills the table with data from a dataset. The column name from the dataset is used to match on the component column id
@param {JSDataSet} dataset @param {Array<String>} [pks] list of dataprovider names; needed in case of using apis: updateRows and deleteRows
Parameters:
restoreColumnState
Restore columns state to a previously save one, using getColumnState. If no argument is used, it restores the columns to designe time state. It won't re-create deleted columns.
@param {String} columnState @return {boolean}
Parameters:
columnState string (optional)
scrollToRow
Scroll viewport to matching row
@param rowData rowData with at least on attribute, used to find the viewport row to scroll to
Parameters:
rowData object
setExpandedGroups
Sets expanded groups
@param {Object} groups an object like {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
Parameters:
groups object
setFormEditorValue
Set the currently opened form editor value
@param {Object} value form editor value
Parameters:
value object
setSelectedRows
Parameters:
rowIndexes int[]
sizeColumnsToFit
stopCellEditing
If a cell is editing, it stops the editing
@param cancel 'true' to cancel the editing (ie don't accept changes)
Parameters:
cancel boolean (optional)
updateRows
Update rows - in order to work, pks needs to be set using renderData, and the rowData objects needs to have pk
@param {Array<Object>} rowsData update rows
Parameters:
rowsData object[]
Types
aggFuncInfo
aggFunc
Type: clientfunction
name
Type: string
column
aggFunc
Name of function to use for aggregation
Type: string
Default Value: ""
autoResize
Type: boolean
Default Value: true
cellRendererFunc
Function to change the cell rendering
Type: clientfunction
cellStyleClassFunc
Type: clientfunction
columnDef
Map where additional column properties of ag-grid can be set
Type: json
dataprovider
Type: string
dndSource
Allow dragging
Type: boolean
Default Value: false
dndSourceFunc
Boolean function for allow/disallow dragging.
Type: clientfunction
editForm
Form used as custom editor
Type: form
editFormSize
Type: dimension
Default Value: {"width":300,"height":200}
editType
Type of editing used for that column
Type: string
enablePivot
If the column can be used as pivot
Type: boolean
Default Value: false
enableResize
Type: boolean
Default Value: true
enableRowGroup
Allow the user to group or ungroup the column
Type: boolean
Default Value: true
enableSort
Type: boolean
Default Value: true
enableToolPanel
Type: boolean
Default Value: true
excluded
When true the column is excluded from the UI
Type: boolean
Default Value: false
exportDisplayValue
If exportData api should export the display value (with format applied) instead of the raw data of the dataset
Type: boolean
Default Value: false
filterType
Type: string
footerStyleClass
Type: styleclass
footerText
Type: tagstring
format
Format for the type set in formatType
Type: format
formatType
Type of data the format is applied on
Type: string
Default Value: "TEXT"
headerGroup
Header group, that this column will be part of
Type: tagstring
headerGroupStyleClass
Type: styleclass
headerIconStyleClass
(Font awesome) Styles for header icon
Type: styleclass
headerStyleClass
Type: styleclass
headerTitle
Type: tagstring
headerTooltip
Type: tagstring
id
Used to set the column id (colId) property in the serialized column state json string of getColumnState and onColumnStateChanged
Type: string
maxWidth
Type: int
minWidth
Type: int
pivotComparatorFunc
Function to sort the pivot columns
Type: clientfunction
pivotIndex
Set this in columns you want to pivot by
Type: int
Default Value: -1
rowGroupIndex
Set the rowGroupIndex to group on the column; the index defines the order of the group when there are multiple grouped columns
Type: int
Default Value: -1
showAs
Type: string
styleClass
Type: styleclass
tooltip
Type: string
valueGetterFunc
Proxy function for getting the cell value from the model
Type: clientfunction
valuelist
Type: valuelist
valuelistConfig
Type: valuelistConfig
visible
Type: boolean
Default Value: true
width
Type: int
Default Value: 0
columnVO
columnsAutoSizingOn
columnResize
Apply 'columnsAutoSizing' when columns are resized
Type: boolean
Default Value: true
columnRowGroupChange
Apply 'columnsAutoSizing' when row grouping is changed
Type: boolean
Default Value: true
displayedColumnsChange
Apply 'columnsAutoSizing' when columns are added/removed
Type: boolean
Default Value: true
gridSizeChange
Apply 'columnsAutoSizing' when grid size changes
Type: boolean
Default Value: true
toolPanelVisibleChange
Apply 'columnsAutoSizing' when the toolpanel visibility is changed
Type: boolean
Default Value: true
filterModelVO
iconConfig
iconCheckboxChecked
Type: styleclass
iconCheckboxCheckedReadOnly
Type: styleclass
iconCheckboxIndeterminate
Type: styleclass
iconCheckboxIndeterminateReadOnly
Type: styleclass
iconCheckboxUnchecked
Type: styleclass
iconCheckboxUncheckedReadOnly
Type: styleclass
iconClipboardCopy
Type: styleclass
iconClipboardPaste
Type: styleclass
iconColumnGroupClosed
Type: styleclass
iconColumnGroupOpened
Type: styleclass
iconColumnMoveAdd
Type: styleclass
iconColumnMoveGroup
Type: styleclass
iconColumnMoveHide
Type: styleclass
iconColumnMoveLeft
Type: styleclass
iconColumnMoveMove
Type: styleclass
iconColumnMovePin
Type: styleclass
iconColumnMovePivot
Type: styleclass
iconColumnMoveRight
Type: styleclass
iconColumnMoveValue
Type: styleclass
iconColumnSelectClosed
Type: styleclass
iconColumnSelectOpen
Type: styleclass
iconColumns
Type: styleclass
iconDropNotAllowed
Type: styleclass
iconEditorChecked
Type: styleclass
iconEditorUnchecked
Type: styleclass
iconFilter
Type: styleclass
iconGroupContracted
Type: styleclass
iconGroupExpanded
Type: styleclass
iconMenu
Type: styleclass
iconMenuAddRowGroup
Type: styleclass
iconMenuPin
Type: styleclass
iconMenuRemoveRowGroup
Type: styleclass
iconMenuValue
Type: styleclass