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

checkboxSelection

When true the row has a checkbox for selecting/unselecting

Type: Boolean Default Value: false

columns

List all columns to be used in table as dataprovider

Type: Array<CustomType<aggrid-datasettable.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: CustomType<aggrid-datasettable.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: Number

groupMinWidth

Type: Number Default Value: 200

groupRowRendererFunc

Function to customize group row rendering when gridOptions.groupDisplayType is set to 'groupRows'

Type: Clientfunction

groupStyleClass

Type: Styleclass

groupWidth

Type: Number Default Value: 200

headerHeight

Type: Number Default Value: 33

iconConfig

Type: CustomType<aggrid-datasettable.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: CustomType<aggrid-datasettable.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: Number Default Value: 300

rowHeight

The height in pixels of the table's rows

Type: Number 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: CustomType<aggrid-datasettable.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 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:

  • {JSDataset} dataset The dataset containing the new rows to append to the table. The dataset's structure must align with the table's columns for proper data binding.

  • {Long} [lastRowIndex] The index of the last row available on the server. If not provided, lazy loading will function as infinite scrolling until this value is set.

autoSizeAllColumns()

Automatically adjusts the widths of all columns to fit their content. This method ensures that each column's width is sized according to the data it contains, without leaving extra unused space.

Example:

// Auto-size all columns in the grid
powerGridInstance.autoSizeAllColumns();

deleteColumn(id)

Removes column with id

Parameters:

  • {String} id The unique identifier of the column to be removed from the component.

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:

  • {Number} rowindex Row index of the editing cell (0-based)

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

  • {String} [fileName] The name of the file to save the exported data to. If not provided, a default name will be used.

  • {Boolean} [skipHeader] If true, the headers of the table will be excluded from the exported file. Defaults to false.

  • {Boolean} [columnGroups] If true, includes column group information in the export. Defaults to false.

  • {Boolean} [skipFooters] If true, the footers of the table will be excluded from the exported file. Defaults to false.

  • {Boolean} [skipGroups] If true, group rows will be excluded from the exported file. Defaults to false.

  • {Boolean} [asCSV] If true, the data will be exported in CSV format instead of XLSX. Defaults to false.

exportToDataset()

Export data to JSDataSet

Returns: JSDataset A dataset object containing the exported grid data, where the first row represents

getAllColumns()

Returns all the columns

Returns: Array<CustomType<aggrid-datasettable.column>> An array of all column objects currently defined in the table.

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:

  • {String} id The unique identifier of the column to retrieve in the Servoy grid.

  • {Boolean} [forChange] Indicates whether the column is being retrieved for modifications.

Returns: CustomType<aggrid-datasettable.column> The column object at the specified index.

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 A JSON string representing the current state of the columns, including their width, position, and grouping state.

getExpandedGroups()

Returns currently expanded groups as an object like: {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}

Returns: Object An object representing the currently expanded groups in the table.

getSelectedRows()

Gets selected rows data

Returns: Array<Object> An array of objects representing the data of the currently selected rows in the table.

isPivotMode()

Returns pivot mode state

Returns: Boolean True if the pivot mode is currently enabled, otherwise false.

moveColumn(id,index)

Move column

Parameters:

newColumn(id,index)

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

Parameters:

  • {String} id The unique identifier for the new column to be added.

  • {Number} [index] 0-based index

Returns: CustomType<aggrid-datasettable.column> The column object that was created and added to the table.

newRows(rowsData,appendToBeginning)

Create new rows

Parameters:

  • {Array<object>} rowsData New rows

  • {Boolean} [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:

  • {JSDataset} [dataset] The dataset containing the data to populate the table. The dataset's column names must match the component's column IDs to bind data correctly.

  • {Array<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] A JSON string representing the saved state of the columns, including width, position, and grouping state. If not provided, the columns will be restored to their design-time state.

scrollToRow(rowData)

Scroll viewport to matching row

Parameters:

  • {Object} rowData RowData with at least on attribute, used to find the viewport row to scroll to

setExpandedGroups(groups)

Sets expanded groups

Parameters:

  • {Object} 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)

Sets selected rows

Parameters:

  • {Array<int>} rowIndexes An array of 0-based row indexes to be selected in the table.

sizeColumnsToFit()

Adjusts the columns' widths to fit the available viewport, ensuring that all visible columns are resized to fill the table's width. This method dynamically resizes columns to ensure no empty space remains in the grid's horizontal viewport.

Example:

elements.myTable.sizeColumnsToFit();

stopCellEditing(cancel)

If a cell is editing, it stops the editing

Parameters:

  • {Boolean} [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:

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

  • gridReady

    • Apply 'columnsAutoSizing' when grid is ready to be shown

    • 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

Was this helpful?