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.groupDisplayType is set to 'groupRows'
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. When responsiveHeight is set to -1, the table will auto-size it's height to the number of rows displayed inside the grid - in this case there is no vertical scrollbar and all rows are rendered
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(rowData,columnId,cellData,event,dataTarget)
Called when the mouse is clicked on a row/cell
Parameters:
onCellDoubleClick(rowData,columnId,cellData,event,dataTarget)
Called when the mouse is double clicked on a row/cell
Parameters:
onCellRightClick(rowData,columnId,cellData,event,dataTarget)
Called when the right mouse button is clicked on a row/cell
Parameters:
onColumnDataChange(rowindex,columnindex,oldvalue,newvalue,event,rowData)
Called when the columns data is changed
Parameters:
Returns: {boolean}
onColumnFormEditStarted(rowindex,columnindex,value)
Called when the column's form editor is started
Parameters:
onColumnStateChanged(columnState,event)
Called when the columns state is changed
Parameters:
onDrop(sourceRow,targetRow,event)
Called when a row is dropped as a result of a drag-n-drop
Parameters:
onFooterClick(columnindex,event,dataTarget)
Called when the mouse is clicked on a footer cell
Parameters:
onLazyLoadingGetRows(startRow,endRow,rowGroupCols,valueCols,pivotCols,pivotMode,groupKeys,filterModels,sortModels)
Called when lazy loading is used, and new rows are requested to display
Parameters:
{long} startRow
{long} endRow
{columnVO[]} rowGroupCols
{columnVO[]} valueCols
{columnVO[]} pivotCols
{boolean} pivotMode
{string[]} groupKeys
{filterModelVO[]} filterModels
{sortModelVO[]} sortModels
onReady()
Called when the table is ready to be shown
onRowGroupOpened(groupcolumnindexes,groupkeys,isopened)
Called when group is opened/closed
Parameters:
onRowSelected(rowData,selected,event)
Called when the mouse is clicked on a row/cell
Parameters:
API
addAggCustomFuncs(aggFuncs)
Add custom aggregate functions. Ex.: addAggCustomFuncs({ myAggregate: '(function (valuesArray) { return myAggValueNumber })'})
Parameters:
{map} aggFuncs AggFuncs object with properties names the aggregates name, and values the custom function as string
appendLazyRequestData(dataset,lastRowIndex)
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
Parameters:
autoSizeAllColumns()
deleteColumn(id)
Removes column with id
Parameters:
{string} id Id
deleteRows(rowsKey)
Delete rows - in order to work, pks needs to be set using renderData, and the rowsKey objects needs to have pk
Parameters:
{object[]} rowsKey RowsKey delete rows
editCellAt(rowindex,columnindex)
Start cell editing (only works when the table is not in grouping mode).
Parameters:
exportData(fileName,skipHeader,columnGroups,skipFooters,skipGroups,asCSV)
Export data to excel format (xlsx)
Parameters:
exportToDataset()
@return {dataset}
Returns: dataset
getAllColumns()
Returns all the columns
Returns: column[]
getColumn(id,forChange)
Gets the column with id. If changes will be made on the returned column, it should be called with forChange set to true
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
Returns: string
getExpandedGroups()
Returns currently expanded groups as an object like: {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
Returns: object ** s {Object}
getSelectedRows()
Gets selected rows data
Returns: object[]
isPivotMode()
Returns pivot mode state
Returns: boolean
moveColumn(id,index)
Move column
Parameters:
newColumn(id,index)
Adds new column at specified index. Index is 0 based.
Parameters:
Returns: column
newRows(rowsData,appendToBeginning)
Create new rows
Parameters:
renderData(dataset,pks)
Fills the table with data from a dataset. The column name from the dataset is used to match on the component column id
Parameters:
restoreColumnState(columnState)
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.
Parameters:
{string} [columnState] ColumnState
scrollToRow(rowData)
Scroll viewport to matching row
Parameters:
{object} rowData ** rowData rowData with at least on attribute, used to find the viewport row to scroll to
setExpandedGroups(groups)
Sets expanded groups
Parameters:
{object} groups Groups an object like {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}
setFormEditorValue(value)
Set the currently opened form editor value
Parameters:
{object} value Form editor value
setSelectedRows(rowIndexes)
Parameters:
{int[]} rowIndexes
sizeColumnsToFit()
stopCellEditing(cancel)
If a cell is editing, it stops the editing
Parameters:
{boolean} [cancel] ** cancel 'true' to cancel the editing (ie don't accept changes)
updateRows(rowsData)
Update rows - in order to work, pks needs to be set using renderData, and the rowData objects needs to have pk
Parameters:
{object[]} rowsData RowsData update rows
Types
aggFuncInfo
scripting type: CustomType<aggrid-datasettable.aggFuncInfo>
aggFunc
Type: clientfunction
name
Type: string
column
scripting type: CustomType<aggrid-datasettable.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
scripting type: CustomType<aggrid-datasettable.columnVO>
columnsAutoSizingOn
scripting type: CustomType<aggrid-datasettable.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
scripting type: CustomType<aggrid-datasettable.filterModelVO>
iconConfig
scripting type: CustomType<aggrid-datasettable.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
iconPivotPanel
Type: styleclass
iconRefreshData
Type: styleclass
Default Value: "glyphicon glyphicon-refresh"
iconRowGroupPanel
Type: styleclass
iconSortAscending
Type: styleclass
iconSortDescending
Type: styleclass
iconSortUnSort
Type: styleclass
iconValuePanel
Type: styleclass
mainMenuItemsConfig
scripting type: CustomType<aggrid-datasettable.mainMenuItemsConfig>
autoSizeAll
Type: boolean
Default Value: false
autoSizeThis
Type: boolean
Default Value: false
contractAll
Type: boolean
Default Value: false
expandAll
Type: boolean
Default Value: false
pinSubMenu
Type: boolean
Default Value: false
resetColumns
Type: boolean
Default Value: false
rowGroup
Type: boolean
Default Value: true
rowUnGroup
Type: boolean
Default Value: true
valueAggSubMenu
Type: boolean
Default Value: false
rowInfo
scripting type: CustomType<aggrid-datasettable.rowInfo>
sortModelVO
scripting type: CustomType<aggrid-datasettable.sortModelVO>
toolPanelConfig
scripting type: CustomType<aggrid-datasettable.toolPanelConfig>
suppressColumnExpandAll
Type: boolean
Default Value: false
suppressColumnFilter
Type: boolean
Default Value: false
suppressColumnSelectAll
Type: boolean
Default Value: false
suppressPivotMode
Type: boolean
Default Value: false
suppressPivots
Type: boolean
Default Value: false
suppressRowGroups
Type: boolean
Default Value: false
suppressSideButtons
Type: boolean
Default Value: false
suppressValues
Type: boolean
Default Value: false
Last updated