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

When true, pressing Enter during editing will automatically move to the next cell. Type: Boolean Default Value: false

enableColumnResize

Enables column resizing by user interaction. Type: Boolean Default Value: true

enableSorting

Enable column sorting by clicking on the column's header Type: Boolean Default Value: true

enabled

gridOptions

Map where additional grid properties of ag-grid can be set Type: Json

groupMaxWidth

Maximum allowed width (in pixels) for group rows. Type: Number

groupMinWidth

Minimum allowed width (in pixels) for group rows. Type: Number Default Value: 200

groupRowRendererFunc

groupStyleClass

groupWidth

Fixed width (in pixels) for group rows. Type: Number Default Value: 200

headerHeight

The height (in pixels) of the table header. Type: Number Default Value: 33

iconConfig

Default icon configuration for grid controls. Type: CustomType<aggrid-datasettable.iconConfig>

isEditableFunc

localeText

mainMenuItemsConfig

Configuration options for main menu items in the grid. Type: CustomType<aggrid-datasettable.mainMenuItemsConfig>

multiSelect

When true, multiple rows can be selected simultaneously. Type: Boolean Default Value: false

onDragGetImageFunc

onDragOverFunc

pivotMode

Pivoting allows you to take a columns values and turn them into columns Type: Boolean Default Value: false

readOnly

When true, the table operates in read‑only mode. 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

showColumnsMenuTab

When true, a dedicated columns menu tab is displayed. Type: Boolean Default Value: false

styleClass

tabSeq

toolPanelConfig

Configuration options for the grid’s tool panel. Type: CustomType<aggrid-datasettable.toolPanelConfig>

useLazyLoading

When true, the table uses lazy loading to fetch data on demand. Type: Boolean Default Value: false

visible

Events

onCellClick(rowData,columnId,cellData,event,dataTarget)

Called when the mouse is clicked on a row/cell

Parameters:

  • {Object} rowData The data for the clicked row.

  • {String} [columnId] The identifier of the clicked column.

  • {Object} [cellData] The data of the clicked cell.

  • {JSEvent} [event] The event object associated with the click.

  • {String} [dataTarget] Optional data target identifier.

onCellDoubleClick(rowData,columnId,cellData,event,dataTarget)

Called when the mouse is double clicked on a row/cell

Parameters:

  • {Object} rowData The data for the double-clicked row.

  • {String} [columnId] The identifier of the double-clicked column.

  • {Object} [cellData] The data of the double-clicked cell.

  • {JSEvent} [event] The event object associated with the double-click.

  • {String} [dataTarget] Optional data target identifier.

onCellRightClick(rowData,columnId,cellData,event,dataTarget)

Called when the right mouse button is clicked on a row/cell

Parameters:

  • {Object} rowData The data for the right-clicked row.

  • {String} [columnId] The identifier of the right-clicked column.

  • {Object} [cellData] The data of the right-clicked cell.

  • {JSEvent} [event] The event object associated with the right-click.

  • {String} [dataTarget] Optional data target identifier.

onColumnDataChange(rowindex,columnindex,oldvalue,newvalue,event,rowData)

Called when the columns data is changed

Parameters:

  • {Number} rowindex The index of the row where the change occurred.

  • {Number} [columnindex] The index of the column where the change occurred.

  • {Object} [oldvalue] The previous value of the cell.

  • {Object} [newvalue] The new value of the cell.

  • {JSEvent} [event] The event that triggered the change.

  • {Object} rowData The full data object for the row.

Returns: {Boolean}

onColumnFormEditStarted(rowindex,columnindex,value)

Called when the column's form editor is started

Parameters:

  • {Number} [rowindex] The index of the row being edited.

  • {Number} [columnindex] The index of the column being edited.

  • {Object} [value] The initial value of the cell for editing.

onColumnStateChanged(columnState,event)

Called when the columns state is changed

Parameters:

  • {String} columnState A JSON string representing the new state of the columns.

  • {JSEvent} [event] The event that triggered the change.

onDrop(sourceRows,targetRow,event)

Called when a row is dropped as a result of a drag-n-drop

Parameters:

  • {Array<Object>} sourceRows An Array of plain objects if dragged from a power grid, or JSRecord objects if from a data grid

  • {Object} targetRow The target row where the rows were dropped.

  • {JSEvent} event The event object associated with the drop action.

onFooterClick(columnindex,event,dataTarget)

Called when the mouse is clicked on a footer cell

Parameters:

  • {Number} [columnindex] The index of the footer column that was clicked.

  • {JSEvent} [event] The event object associated with the click.

  • {String} [dataTarget] Optional target identifier for the click.

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:

  • {Array<Number>} [groupcolumnindexes] An array of column indexes associated with the group.

  • {Array<Object>} [groupkeys] The keys representing the group hierarchy.

  • {Boolean} [isopened] True if the group was expanded, false if collapsed.

onRowSelected(rowData,selected,event)

Called when the mouse is clicked on a row/cell

Parameters:

  • {Object} rowData The data for the clicked row.

  • {Boolean} selected True if the row has been selected, false if deselected.

  • {JSEvent} [event] The event object associated with the click.

API

addAggCustomFuncs(aggFuncs)

Add custom aggregate functions. Ex.: addAggCustomFuncs({ myAggregate: '(function (valuesArray) { return myAggValueNumber })'})

Parameters:

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

Information about an aggregation function used in the grid. scripting type: CustomType<aggrid-datasettable.aggFuncInfo>

  • aggFunc

    • The aggregation function implementation.

  • name

    • The name of the aggregation function.

    • Type: string

column

Defines a column configuration for the grid. scripting type: CustomType<aggrid-datasettable.column>

  • aggFunc

    • Name of function to use for aggregation

    • Type: string

    • Default Value: ""

  • autoResize

    • Enables auto-resizing of the column based on its content.

    • Type: boolean

    • Default Value: true

  • cellRendererFunc

    • Function to change the cell rendering

  • cellStyleClassFunc

    • Function to determine the CSS style class for the cell dynamically.

  • columnDef

    • Map where additional column properties of ag-grid can be set

    • Type: json

  • dataprovider

    • The data provider name associated with the column.

    • Type: string

  • dndSource

    • Allow dragging

    • Type: boolean

    • Default Value: false

  • dndSourceFunc

    • Boolean function for allow/disallow dragging.

  • editForm

    • Form used as custom editor

  • editFormSize

    • Size configuration for the custom cell editor form.

    • 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

    • Enables resizing for this column.

    • Type: boolean

    • Default Value: true

  • enableRowGroup

    • Allow the user to group or ungroup the column

    • Type: boolean

    • Default Value: true

  • enableSort

    • Enables sorting for this column.

    • Type: boolean

    • Default Value: true

  • enableToolPanel

    • When true, the column is available in the tool panel.

    • Type: boolean

    • Default Value: true

  • 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

    • The type of filter applied to this column.

    • Type: string

  • footerStyleClass

    • CSS style class for the column footer.

  • footerText

    • The text to be displayed in the column footer.

  • format

    • Format for the type set in formatType

  • formatType

    • Type of data the format is applied on

    • Type: string

    • Default Value: "TEXT"

  • headerGroup

    • Header group, that this column will be part of

  • headerGroupStyleClass

    • CSS style class for the header group.

  • headerIconStyleClass

    • (Font awesome) Styles for header icon

  • headerStyleClass

    • CSS style class for the column header.

  • headerTitle

    • The title text to be displayed in the column header.

  • headerTooltip

    • Tooltip text for the column header.

  • id

    • Used to set the column id (colId) property in the serialized column state json string of getColumnState and onColumnStateChanged

    • Type: string

  • maxWidth

    • The maximum width allowed for the column in pixels.

    • Type: int

  • minWidth

    • The minimum width allowed for the column in pixels.

    • Type: int

  • pivotComparatorFunc

    • Function to sort the pivot columns

  • 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

    • Alternative display mode for the column.

    • Type: string

  • styleClass

    • CSS style class for the cell.

  • tooltip

    • Tooltip text for the cell.

    • Type: string

  • valueGetterFunc

    • Proxy function for getting the cell value from the model

  • valuelist

    • Value list for mapping the column's values.

  • valuelistConfig

    • Configuration settings for the value list.

  • visible

    • Visibility flag; when false the column is hidden.

    • Type: boolean

    • Default Value: true

  • width

    • The width of the column in pixels.

    • Type: int

    • Default Value: 0

columnVO

Represents a simplified column value object used in the grid. scripting type: CustomType<aggrid-datasettable.columnVO>

  • aggFunc

    • The aggregation function associated with the column.

    • Type: string

  • displayName

    • The display name for the column.

    • Type: string

  • id

    • Unique identifier of the column.

    • Type: string

columnsAutoSizingOn

Events that trigger auto-sizing of columns. 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

Model representing a filter applied to a column. scripting type: CustomType<aggrid-datasettable.filterModelVO>

  • id

    • The unique identifier of the filter.

    • Type: string

  • operator

    • The operator used in the filter (e.g., '=', '>', '<').

    • Type: string

  • value

    • The value used for filtering.

    • Type: string

iconConfig

Icon configuration for grid components. scripting type: CustomType<aggrid-datasettable.iconConfig>

  • iconCheckboxChecked

    • Icon for a checked checkbox.

  • iconCheckboxCheckedReadOnly

    • Icon for a read-only checked checkbox.

  • iconCheckboxIndeterminate

    • Icon for an indeterminate checkbox state.

  • iconCheckboxIndeterminateReadOnly

    • Icon for a read-only indeterminate checkbox.

  • iconCheckboxUnchecked

    • Icon for an unchecked checkbox.

  • iconCheckboxUncheckedReadOnly

    • Icon for a read-only unchecked checkbox.

  • iconClipboardCopy

    • Icon for copying to the clipboard.

  • iconClipboardPaste

    • Icon for pasting from the clipboard.

  • iconColumnGroupClosed

    • Icon for a closed column group.

  • iconColumnGroupOpened

    • Icon for an open column group.

  • iconColumnMoveAdd

    • Icon for adding a column.

  • iconColumnMoveGroup

    • Icon for grouping columns.

  • iconColumnMoveHide

    • Icon for hiding a column.

  • iconColumnMoveLeft

    • Icon for moving a column to the left.

  • iconColumnMoveMove

    • Icon for moving a column.

  • iconColumnMovePin

    • Icon for pinning a column.

  • iconColumnMovePivot

    • Icon for pivoting a column.

  • iconColumnMoveRight

    • Icon for moving a column to the right.

  • iconColumnMoveValue

    • Icon for moving a column's value.

  • iconColumnSelectClosed

    • Icon for a closed column selection.

  • iconColumnSelectOpen

    • Icon for an open column selection.

  • iconColumns

    • Icon representing the columns panel.

  • iconDropNotAllowed

    • Icon indicating that a drop operation is not allowed.

  • iconEditorChecked

    • Icon for a checked state in an editor.

  • iconEditorUnchecked

    • Icon for an unchecked state in an editor.

  • iconFilter

    • Icon for filtering functionality.

  • iconGroupContracted

    • Icon representing a collapsed group.

  • iconGroupExpanded

    • Icon representing an expanded group.

  • iconMenu

    • Icon for the grid menu.

  • iconMenuAddRowGroup

    • Icon for adding a row group via the menu.

  • iconMenuPin

    • Icon for pinning via the menu.

  • iconMenuRemoveRowGroup

    • Icon for removing a row group via the menu.

  • iconMenuValue

    • Icon for displaying values in the menu.

  • iconPivotPanel

    • Icon for the pivot panel.

  • iconRefreshData

    • Icon for refreshing grid data.

    • Default Value: "glyphicon glyphicon-refresh"

  • iconRowGroupPanel

    • Icon for the row group panel.

  • iconSortAscending

    • Icon indicating ascending sort order.

  • iconSortDescending

    • Icon indicating descending sort order.

  • iconSortUnSort

    • Icon indicating an unsorted column.

  • iconValuePanel

    • Icon for the value panel.

mainMenuItemsConfig

Configuration options for the main menu items in the grid. scripting type: CustomType<aggrid-datasettable.mainMenuItemsConfig>

  • autoSizeAll

    • Option to auto-size all columns.

    • Type: boolean

    • Default Value: false

  • autoSizeThis

    • Option to auto-size the current column.

    • Type: boolean

    • Default Value: false

  • contractAll

    • Option to collapse all groups in the grid.

    • Type: boolean

    • Default Value: false

  • expandAll

    • Option to expand all groups in the grid.

    • Type: boolean

    • Default Value: false

  • pinSubMenu

    • Configuration for the pin sub-menu.

    • Type: boolean

    • Default Value: false

  • resetColumns

    • Option to reset columns to their default state.

    • Type: boolean

    • Default Value: false

  • rowGroup

    • Option to group rows by this column.

    • Type: boolean

    • Default Value: true

  • rowUnGroup

    • Option to ungroup rows.

    • Type: boolean

    • Default Value: true

  • valueAggSubMenu

    • Configuration for the value aggregation sub-menu.

    • Type: boolean

    • Default Value: false

rowInfo

Information about a row in the grid. scripting type: CustomType<aggrid-datasettable.rowInfo>

  • rowData

    • The data object for the row.

    • Type: object

  • rowIndex

    • The index of the row in the grid.

    • Type: int

sortModelVO

Model representing the sorting state for a column. scripting type: CustomType<aggrid-datasettable.sortModelVO>

  • colId

    • The column identifier to which this sorting model applies.

    • Type: string

  • sort

    • The sort direction ('asc' for ascending, 'desc' for descending).

    • Type: string

toolPanelConfig

Configuration options for the grid's tool panel. scripting type: CustomType<aggrid-datasettable.toolPanelConfig>

  • suppressColumnExpandAll

    • When true, the option to expand all columns is suppressed in the tool panel.

    • Type: boolean

    • Default Value: false

  • suppressColumnFilter

    • When true, the column filter is suppressed in the tool panel.

    • Type: boolean

    • Default Value: false

  • suppressColumnSelectAll

    • When true, the option to select all columns is suppressed in the tool panel.

    • Type: boolean

    • Default Value: false

  • suppressPivotMode

    • When true, the pivot mode option is suppressed in the tool panel.

    • Type: boolean

    • Default Value: false

  • suppressPivots

    • When true, pivot options are suppressed in the tool panel.

    • Type: boolean

    • Default Value: false

  • suppressRowGroups

    • When true, row groups are suppressed in the tool panel.

    • Type: boolean

    • Default Value: false

  • suppressSideButtons

    • When true, side buttons in the tool panel are suppressed.

    • Type: boolean

    • Default Value: false

  • suppressValues

    • When true, values are suppressed in the tool panel.

    • Type: boolean

    • Default Value: false

PreviousData GridNextTable

Last updated

Was this helpful?