ServoyCloudSupportSamplesOpen SourceCommunity

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:

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" 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:

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

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

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

scripting type: CustomType<aggrid-datasettable.aggFuncInfo>

column

scripting type: CustomType<aggrid-datasettable.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

  • 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

  • footerStyleClass

  • footerText

  • 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

  • headerIconStyleClass

    • (Font awesome) Styles for header icon

    • Type: styleclass

  • 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

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>

mainMenuItemsConfig

scripting type: CustomType<aggrid-datasettable.mainMenuItemsConfig>

  • autoSizeAll

  • autoSizeThis

  • contractAll

  • expandAll

  • pinSubMenu

  • resetColumns

  • rowGroup

  • rowUnGroup

  • valueAggSubMenu

rowInfo

scripting type: CustomType<aggrid-datasettable.rowInfo>

sortModelVO

scripting type: CustomType<aggrid-datasettable.sortModelVO>

toolPanelConfig

scripting type: CustomType<aggrid-datasettable.toolPanelConfig>

  • suppressColumnExpandAll

  • suppressColumnFilter

  • suppressColumnSelectAll

  • suppressPivotMode

  • suppressPivots

  • suppressRowGroups

  • suppressSideButtons

  • suppressValues

PreviousData GridNextTable

Last updated