ServoyCloudSupportSamplesOpen SourceCommunity

Data Grid

(part of package 'Servoy NG-Grids') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

Data Grid is a table with advanced functionality that operates on JSFoundset data (so it can work directly with the database). It is designed to work with a large number of rows, potentially infinite, since data is loaded lazily into the table, even when grouped.

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-groupingtable.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-groupingtable.columnsAutoSizingOn>

continuousColumnsAutoSizing

Apply 'columnsAutoSizing' whenever columns width are changed

Type: Boolean Default Value: false

editNextCellOnEnter

Type: Boolean Default Value: false

enableColumnMove

If moving of columns is enabled

Type: Boolean Default Value: true

enableColumnResize

Allow the user to resize columns

Type: Boolean Default Value: true

enableSorting

Enable column sorting by clickin 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

groupCheckbox

When true the group has checkbox for selecting/unselecting all child rows

Type: Boolean Default Value: false

groupUseEntireRow

When true the group takes the entire row

Type: Boolean Default Value: true

iconConfig

Type: CustomType<aggrid-groupingtable.iconConfig>

localeText

Map where locales of ag-grid can be set

Type: Map

mainMenuItemsConfig

Type: CustomType<aggrid-groupingtable.mainMenuItemsConfig>

myFoundset

The foundset where data are fetched from

Type: JSFoundset Default Value: {"foundsetSelector":""}

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

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

rowStyleClassDataprovider

Use dataSource calculation as rowStyleClassDataprovider to set styleClass conditionally to rows. The calculation should return the class name (or names) to be applied to the row

Type: Dataprovider

showColumnsMenuTab

If the column selection panel should be shown in the column menu

Type: Boolean Default Value: false

showGroupCount

When true the number of rows for groups is shown, beside the name

Type: Boolean Default Value: false

showLoadingIndicator

Type: Boolean Default Value: true

styleClass

Type: Styleclass Default Value: "ag-theme-alpine"

tabSeq

Type: Tabseq

toolPanelConfig

Type: CustomType<aggrid-groupingtable.toolPanelConfig>

tooltipTextRefreshData

Tooltip text shown when hovering the refresh button

Type: String Default Value: "Refresh for latest data !"

visible

Type: Visible

Events

onCellClick(foundsetindex,columnindex,record,event,dataTarget)

Called when the mouse is clicked on a row/cell (foundset and column indexes are given). The foundsetindex is always -1 when there are grouped rows. If you use enabled=false on a column, make sure to test in the handler for columnindex so you only execute the code for that column IF the columnindex is for that column.

Parameters:

onCellDoubleClick(foundsetindex,columnindex,record,event,dataTarget)

Called when the mouse is clicked on a row/cell (foundset and column indexes are given). The foundsetindex is always -1 when there are grouped rows. If you use enabled=false on a column, make sure to test in the handler for columnindex so you only execute the code for that column IF the columnindex is for that column.

Parameters:

onCellRightClick(foundsetindex,columnindex,record,event,dataTarget)

Called when the right mouse button is clicked on a row/cell (foundset and column indexes are given). The foundsetindex is always -1 when there are grouped rows. If you use enabled=false on a column, make sure to test in the handler for columnindex so you only execute the code for that column IF the columnindex is for that column.

Parameters:

onColumnDataChange(foundsetindex,columnindex,oldvalue,newvalue,event,record)

Called when the columns data is changed

Parameters:

Returns: {Boolean}

onColumnFormEditStarted(foundsetindex,columnindex,value)

Called when the column's form editor is started

Parameters:

onColumnStateChanged(columnState,event)

Called when the columns state is changed

Parameters:

onDrop(sourceRecords,targetRecord,event)

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

Parameters:

onElementDataChange()

onFooterClick(columnindex,event,dataTarget)

Called when the mouse is clicked on a footer cell

Parameters:

onReady()

Called when the table is ready to be shown

onRowGroupOpened(groupcolumnindexes,groupkeys,isopened)

Called when group is opened/closed

Parameters:

onSelectedRowsChanged(isgroupselection,groupcolumnid,groupkey,groupselection)

Called when the selected rows have changed.

Parameters:

onSort(columnindexes,sorts)

Called when sort has changed

Parameters:

API

addFunctionCall(alias,f)

Add a Servoy solution function to the grid, that can be called from AGGRID using params.context.componentParent.executeFunctionCall

Example:

function onLoad(event) {
	var f = function(params) {		
	     var generalMenuItems = ['pinSubMenu'];		
	     var saveLayoutItem = {	          
	          name: 'Save Layout',	
	          action: function() {	        	 
	               params.context.componentParent.executeFunctionCall('saveLayout', 'myLayout');
	          }
	     };		
	     generalMenuItems.push(saveLayoutItem);		
	     return generalMenuItems;	
	}
	elements.datagrid_2.addFunctionCall('saveLayout', saveLayout);
	elements.datagrid_2.gridOptions = { "getMainMenuItems": application.generateBrowserFunction(String(f)) };
}

Parameters:

  • {String} alias Name used in params.context.componentParent.executeFunctionCall to call the function

  • {Function} f The Servoy solution function

autoSizeAllColumns()

Auto-sizes all columns based on content.

editCellAt(foundsetindex,columnindex)

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

Parameters:

  • {Number} foundsetindex Foundset row index of the editing cell (1-based)

  • {Number} columnindex Column index in the model of the editing cell (0-based)

getCheckboxGroupSelection()

Returns the selected headers or groups in the table when the headerCheckbox or groupCheckbox property is used. The returned value is an array of objects, where each object represents a selected group or header. Each object includes a `colId` representing the column identifier and, for groups, a `groupkey` representing the group key. For headers, the `groupkey` property is not included.

Example:

// Example of returned data
[
    { colId: 'country', groupkey: 'USA' },   // Group selection
    { colId: 'region' }                      // Header selection
]

Returns: Array<Object> The selected headers or groups. Each object has the following structure: - `colId` (String): The identifier of the column. - `groupkey` (String, optional): The key of the group (not included for headers).

getColumn(index)

Gets the column at index. Index is 0 based.

Example:

    elements.myElement.getColumn()

Parameters:

  • {Number} index Index between 0 and columns length -1

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

getColumnById(colId)

Gets the column with id colId

Example:

    elements.myElement.getColumnById('myid')

Parameters:

  • {String} colId Id of the column

Returns: CustomType<aggrid-groupingtable.column> The column object corresponding to the provided id.

getColumnIndex(colId)

Return the column index for the given column id. Can be used in combination with getColumnState to retrieve the column index for the column state with colId in the columnState object.

Example:

// get the state
var state = elements.table.getColumnState();
// parse the state of each column
var columnsState = JSON.parse(state).columnState;

for (var index = 0; index < columnsState.length; index++) {

  // skip column hidden by the user
  if (!columnsState[index].hide) {

   // get the column using the colId of the columnState
   var columnIndex = elements.table.getColumnIndex(columnsState[index].colId);
     if (columnIndex > -1) {
       var column = elements.table.getColumn(columnIndex);
       // do something with column               
     }
 }
}

@public

Parameters:

  • {String} colId The unique identifier of the column whose index is to be retrieved.

Returns: Number The 0-based index of the column corresponding to the given column id, or -1 if the column id is not found.

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 The current state of the columns as a JSON string for restoring the state.

getColumnsCount()

Gets the number of columns

Example:

    elements.myElement.getColumnsCount()

Returns: Number The total number of columns in the specified element.

getExpandedGroups()

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

Returns: object An object representing the currently expanded groups, where each key is a group name, and its value is an object detailing any expanded subgroups.

getGroupedSelection()

Returns the selected rows when in grouping mode

Returns: Array<JSRecord> An array of JSRecord objects representing the selected rows in grouping mode.

isToolPanelShowing()

Returns true if the ToolPanel is showing

Returns: Boolean `true` if the ToolPanel is showing otherwise `false`

moveColumn(id,index)

Move column

Parameters:

newColumn(dataprovider,index)

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

Example:

    var column = elements.myElement.newColumn('dataproviderid')

Parameters:

  • {String} dataprovider Dataprovider of the column

  • {Number} [index] Index between 0 and columns length

Returns: CustomType<aggrid-groupingtable.column> The newly created column object at the specified index with the given dataprovider.

notifyDataChange()

Notify the component about a data change. Makes the component aware of a data change that requires a refresh data.

Call this method when you are aware of a relevant data change in the foundset which may affect data grouping (e.g. group node created or removed). The component will alert the user of the data change and it will suggest to the user to perform a refresh.

Please note that it’s not necessary to notify the table component if the component is not visible; the component will always present the latest data when rendered again.

@public

refreshData()

Force a full refresh of the data.

WARNING ! be aware that calling this API results in bad user experience since all group nodes will be collapsed instantaneously.

@public

removeAllColumns()

Removes all columns.

Example:

    elements.myElement.removeAllColumns()

Returns: Boolean True if all columns were successfully removed; otherwise, false.

removeColumn(index)

Removes column from specified index. Index is 0 based.

Example:

    elements.myElement.removeColumn(0)

Parameters:

  • {Number} index Index between 0 and columns length -1

Returns: Boolean True if the column was successfully removed, false otherwise.

requestFocus(columnindex)

Request focus on the given column

Parameters:

  • {Number} columnindex Column index in the model of the editing cell (0-based)

restoreColumnState(columnState,onError,columns,filter,sort)

Restore columns state to a previously save one, using getColumnState.

If no argument is used, it restores the columns to designe time state. If the columns from columnState does not match with the columns of the component, no restore will be done.

The optional boolean arguments: columns, filter, sort can be used to specify what to restore: - the columns size/position/visibility (default true), - the filter state (default false), - the sort state (default false).

Parameters:

  • {String} [columnState] A JSON string representing the saved state of the columns, including width, position, visibility, filters, and sorting. If omitted, the columns will be restored to their design-time state.

  • {Function} [onError] A callback function to handle errors during the restore process, such as mismatched column configurations.

  • {Boolean} [columns] Specifies whether to restore the columns' size, position, and visibility. Defaults to true.

  • {Boolean} [filter] Specifies whether to restore the columns' filter state. Defaults to false.

  • {Boolean} [sort] Specifies whether to restore the columns' sort state. Defaults to false.

scrollToSelection()

Scroll to the selected row

setCheckboxGroupSelection(groups)

Sets the selected headers or groups in the table when the headerCheckbox or groupCheckbox property is used. The input should be an array of objects where each object represents a selected group or header. The objects should have a `colId` representing the column identifier, and optionally a `groupkey` representing the key of the group. For headers, the `groupkey` should not be included.

Example:

// Example of selecting groups
const selectedGroups = [
    { colId: 'country', groupkey: 'USA' },
    { colId: 'country', groupkey: 'Canada' }
];
elements.myTable.setCheckboxGroupSelection(selectedGroups);

Example:

// Example of selecting headers
const selectedHeaders = [
    { colId: 'country' },
    { colId: 'region' }
];
elements.myTable.setCheckboxGroupSelection(selectedHeaders);

Parameters:

  • {Array<object>} groups The selected headers or groups. Each object should have the following structure: - `colId` (String): The identifier of the column. - `groupkey` (String, optional): The key of the group (not included for headers).

setExpandedGroups(groups)

Sets expanded groups

Parameters:

  • {Object} groups An object like {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}

setFilterModel(filterModel)

Set the filter model. This api maps to ag-grid's setFilterModel; for more details on the model's structure check this page: https://www.ag-grid.com/angular-data-grid/filter-api/ To clear the filter, use an empty object ({}) as filterModel;

NOTE: The name of the columns from the model are the id properties of the column.

Example:

	var filterModel = {
		"country": {
			"filterType":"text",
			"type":"contains",
			"filter":"Argentina"
		}
	};
	
	var filterModelWithCondition = {
		"freight": {
			"filterType":"number",
			"operator":"OR",
			"condition1": { 
				"filterType":"number",
				"type":"equals",
				"filter":66
			},
			"condition2": {
				"filterType":"number",
				"type":"equals",
				"filter":23
			}
		}
	};
	
	elements.groupingtable_1.setFilterModel(filterModelWithCondition);
	
	//clear filter
	//elements.groupingtable_1.setFilterModel({});

@public

Parameters:

  • {Object} filterModel The filter model object defining the filtering criteria for the grid. Each key represents a column's id, and its value specifies the filter configuration, including filter type, conditions, and operator. To clear all filters, pass an empty object ({} ).

setFormEditorValue(value)

Set the currently opened form editor value

Parameters:

  • {Object} value Form editor value

setGroupedSelection(selectedRecords)

Set the selection in grouping mode 111. The table must be already in grouping mode, and the record already loaded (the group of the record expanded - see: setExpandedGroups)

Parameters:

setReadOnly(readonly,columnids)

Set the table read-only state. If no columnids is used, all columns read-only state is set, otherwise only for the columns specified.

Parameters:

  • {Boolean} readonly Read-only state

  • {Array<string>} [columnids] Array of column ids to make ready-only

showToolPanel(show)

Show or hide the ToolPanel

Parameters:

  • {Boolean} show A flag indicating whether to show (true) or hide (false) the ToolPanel in the Servoy component.

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)

Types

column

scripting type: CustomType<aggrid-groupingtable.column>

  • autoResize

  • columnDef

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

    • Type: json

  • dataprovider

  • dndSource

    • Allow dragging

    • Type: boolean

    • Default Value: false

  • dndSourceDataprovider

    • Boolean dataprovider for allow/disallow dragging.

    • Type: dataprovider

  • 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: modifiable

  • enableResize

  • enableRowGroup

    • Allow the user to group or ungroup the column

    • Type: boolean

    • Default Value: true

  • enableSort

  • enableToolPanel

    • If the column should be visible in the tool panel

    • Type: boolean

    • Default Value: true

  • enabled

  • excluded

    • When true the column is excluded from the UI

    • Type: boolean

    • Default Value: false

  • filterType

  • footerStyleClass

  • footerText

  • format

  • headerCheckbox

    • When true the column has checkbox for selecting/unselecting all rows

    • Type: boolean

    • Default Value: false

  • headerGroup

    • Header group, that this column will be part of

    • Type: tagstring

  • headerGroupStyleClass

  • headerIconStyleClass

    • (Font awesome) Styles for header icon

    • Type: styleclass

  • headerStyleClass

  • headerTitle

    • If the column has a database linked dataprovider, the default value of the headerTitle is the title text of the database column or if that is not set, the database column name.

    • Type: titlestring

  • headerTooltip

  • id

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

    • Type: string

  • isEditableDataprovider

    • Use a Servoy calculation as isEditableDataprovider to set edit state conditionally to the table cell

    • Type: dataprovider

  • maxWidth

  • minWidth

  • 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

  • stopEditingOnChange

  • styleClass

  • styleClassDataprovider

    • Use a Servoy calculation as styleClassDataprovider to set styleClass conditionally to the table cell

    • Type: dataprovider

  • tooltip

  • valuelist

  • valuelistConfig

  • visible

  • width

    • Type: int

    • Default Value: 0

columnsAutoSizingOn

scripting type: CustomType<aggrid-groupingtable.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

functionCall

scripting type: CustomType<aggrid-groupingtable.functionCall>

gridConfig

scripting type: CustomType<aggrid-groupingtable.gridConfig>

  • enableColResize

  • enableSorting

  • groupUseEntireRow

groupedColumn

scripting type: CustomType<aggrid-groupingtable.groupedColumn>

hashedFoundset

scripting type: CustomType<aggrid-groupingtable.hashedFoundset>

iconConfig

scripting type: CustomType<aggrid-groupingtable.iconConfig>

mainMenuItemsConfig

scripting type: CustomType<aggrid-groupingtable.mainMenuItemsConfig>

  • autoSizeAll

  • autoSizeThis

  • contractAll

  • expandAll

  • pinSubMenu

  • resetColumns

  • rowGroup

  • rowUnGroup

  • valueAggSubMenu

toolPanelConfig

scripting type: CustomType<aggrid-groupingtable.toolPanelConfig>

  • suppressColumnExpandAll

  • suppressColumnFilter

  • suppressColumnSelectAll

  • suppressRowGroups

  • suppressSideButtons

PreviousGridsNextPower Grid

Last updated

Was this helpful?