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

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:

deleteRows(rowsKey)

Delete rows - in order to work, pks needs to be set using renderData, and the rowsKey objects needs to have pk

Parameters:

editCellAt(rowindex,columnindex)

Start cell editing (only works when the table is not in grouping mode).

Parameters:

  • {int} rowindex ** rowindex row index of the editing cell (0-based)

  • {int} columnindex ** columnindex column index in the model of the editing cell (0-based)

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:

  • {string} id ** id column id

  • {int} index ** index new position (0-based)

newColumn(id,index)

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

Parameters:

Returns: column

newRows(rowsData,appendToBeginning)

Create new rows

Parameters:

  • {object[]} rowsData RowsData new rows

  • {boolean} [appendToBeginning] AppendToBeginning if true rows will be added to the beginning of the table

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:

  • {dataset} [dataset]

  • {string[]} [pks] List of dataprovider names; needed in case of using apis: updateRows and deleteRows

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:

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>

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