v2023.12
ServoyCloud Support Samples Open Source Community

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

continuousColumnsAutoSizing

Size columns to fit 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

onDragOverFunc

Callback when dragging over a row - returns true whenever a drop is allowed.

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:

rowindex int columnindex int value object

onColumnStateChanged

Called when the columns state is changed

Parameters:

columnState string event JSEvent

onDrop

Called when a row is dropped as a result of a drag-n-drop

Parameters:

sourceRow object[] targetRow object event JSEvent

onFooterClick

Called when the mouse is clicked on a footer cell

Parameters:

columnindex int event JSEvent

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:

rowData object selected boolean event JSEvent

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 specify the index of the last row on the server, if not set, the lazy loading will behave like an infinite scroll, and onLazyLoadingGetRows called until lastRowIndex will be set

@param {JSDataSet} dataset @param {Number} lastRowIndex

Parameters:

dataset dataset lastRowIndex long (optional)

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:

rowindex int columnindex int

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:

id string forChange boolean (optional)

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:{}}}

@returns {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:

id string index int

newColumn

Adds new column at specified index. Index is 0 based.

@param {String} id @param {Number} [index] 0-based index @return {column}

Parameters:

id string index int (optional)

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:

rowsData object[] appendToBeginning boolean (optional)

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:

dataset dataset (optional) pks string[] (optional)

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

column

  • aggFunc

    • Name of function to use for aggregation

    • Type: string

    • Default Value: ""

  • autoResize

  • cellRendererFunc

  • cellStyleClassFunc

  • columnDef

    • Map where additional column properties of ag-grid can be set

    • Type: json

  • dataprovider

  • dndSource

    • Allow dragging

    • Type: boolean

    • Default Value: false

  • dndSourceFunc

  • 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

  • enableRowGroup

    • Allow the user to group or ungroup the column

    • Type: boolean

    • Default Value: true

  • enableSort

  • enableToolPanel

  • 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

  • footerStyleClass

  • footerText

  • format

    • Format string as used in Servoy, for the type set in formatType

    • Type: tagstring

  • 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

  • headerStyleClass

  • headerTitle

  • headerTooltip

  • id

    • Used to set the column id (colId) property in the serialized column state json string of getColumnState and onColumnStateChanged

    • Type: string

  • maxWidth

  • minWidth

  • pivotComparatorFunc

  • 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

  • styleClass

  • tooltip

  • valueGetterFunc

    • Proxy function for getting the cell value from the model

    • Type: clientfunction

  • valuelist

  • valuelistConfig

  • visible

  • width

    • Type: int

    • Default Value: 0

columnVO

filterModelVO

iconConfig

mainMenuItemsConfig

  • autoSizeAll

  • autoSizeThis

  • contractAll

  • expandAll

  • pinSubMenu

  • resetColumns

  • rowGroup

  • rowUnGroup

  • valueAggSubMenu

rowInfo

sortModelVO

toolPanelConfig

  • suppressColumnExpandAll

  • suppressColumnFilter

  • suppressColumnSelectAll

  • suppressPivotMode

  • suppressPivots

  • suppressRowGroups

  • suppressSideButtons

  • suppressValues

PreviousData GridNextTable

Last updated