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

  • 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