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


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

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

  • 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

  • valuelist

  • valuelistConfig

  • visible

  • 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