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


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


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


localeText

Map where locales of ag-grid can be set

Type: map


Type: mainMenuItemsConfig


myFoundset

The foundset where data are fetched from

Type: foundset 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

Type: int Default Value: 300


rowHeight

The height in pixels of the table's rows

Type: int 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: toolPanelConfig


tooltipTextRefreshData

Tooltip text shown when hovering the refresh button

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


visible

Type: visible


Events

onCellClick

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

Parameters:

foundsetindex int columnindex int record record event JSEvent


onCellDoubleClick

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

Parameters:

foundsetindex int columnindex int record record event JSEvent


onCellRightClick

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

Parameters:

foundsetindex int columnindex int record record event JSEvent


onColumnDataChange

Called when the columns data is changed

Parameters:

foundsetindex int columnindex int oldvalue object newvalue object event JSEvent record record

Returns: boolean


onColumnFormEditStarted

Called when the column's form editor is started

Parameters:

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

sourceRecords record[] targetRecord record event JSEvent


onElementDataChange


onFooterClick

Called when the mouse is clicked on a footer cell

Parameters:

columnindex int event JSEvent


onReady

Called when the table is ready to be shown


onRowGroupOpened

Called when group is opened/closed

Parameters:

groupcolumnindexes int[] groupkeys object[] isopened boolean


onSelectedRowsChanged

Called when the selected rows have changed.

Parameters:

isgroupselection boolean groupcolumnid string groupkey object groupselection boolean


onSort

Called when sort has changed

Parameters:

columnindexes int[] sorts string[]


API

addFunctionCall

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)) };
}

@param {String} alias name used in params.context.componentParent.executeFunctionCall to call the function @param {Function} f the Servoy solution function

Parameters:

alias string f function


autoSizeAllColumns

Auto-sizes all columns based on content.


editCellAt

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

@param foundsetindex foundset row index of the editing cell (1-based) @param columnindex column index in the model of the editing cell (0-based)

Parameters:

foundsetindex int columnindex int


getCheckboxGroupSelection

Returns: object[]


getColumn

Gets the column at index. Index is 0 based.

@param index index between 0 and columns length -1 @example

    elements.myElement.getColumn()

@return {column}

Parameters:

index int

Returns: column


getColumnById

Gets the column with id colId

@param colId id of the column @example

    elements.myElement.getColumnById('myid')

@return {column}

Parameters:

colId string

Returns: column


getColumnIndex

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.

@param {String} colId @return {Number} @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:

colId string

Returns: int


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


getColumnsCount

Gets the number of columns

@example

    elements.myElement.getColumnsCount()

Returns: int


getExpandedGroups

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

@returns {Object}

Returns: object


getGroupedSelection

Returns the selected rows when in grouping mode

Returns: record[]


isToolPanelShowing

Returns true if the ToolPanel is showing

@return {Boolean}

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 dataproviderid dataprovider of the column @param index index between 0 and columns length @example

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

@return {column}

Parameters:

dataprovider string index int (optional)

Returns: column


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

@return {boolean}

Returns: boolean


removeColumn

Removes column from specified index. Index is 0 based.

@example

    elements.myElement.removeColumn(0)

@param index index between 0 and columns length -1 @return {boolean}

Parameters:

index int

Returns: boolean


requestFocus

Request focus on the given column

@param columnindex column index in the model of the editing cell (0-based)

Parameters:

columnindex int


restoreColumnState

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

@param {String} columnState @param {Function} onError @param {Boolean} columns @param {Boolean} filter @param {Boolean} sort

Parameters:

columnState string (optional) onError function (optional) columns boolean (optional) filter boolean (optional) sort boolean (optional)


scrollToSelection

Scroll to the selected row


setCheckboxGroupSelection

Parameters:

groups object[]


setExpandedGroups

Sets expanded groups

@param {Object} groups an object like {expandedGroupName1:{}, expandedGroupName2:{expandedSubGroupName2_1:{}, expandedSubGroupName2_2:{}}}

Parameters:

groups object


setFilterModel

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/ NOTE: The name of the columns from the model are the id properties of the column; to clear the filter, use an empty object ({}) as filterModel;

@param {Object} filterModel @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:

filterModel object


setFormEditorValue

Set the currently opened form editor value

@param {Object} value form editor value

Parameters:

value object


setGroupedSelection

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

@param {Object} value form editor value

Parameters:

selectedRecords record[]


setReadOnly

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

@param {Boolean} readOnly read-only state @param {Array<String>} columnids array of column ids to make ready-only

Parameters:

readonly boolean columnids string[] (optional)


showToolPanel

Show or hide the ToolPanel

@param {Boolean} show

Parameters:

show boolean


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)


Types

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.

  • 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

  • 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

  • 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

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

  • 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

  • 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

  • tooltip

  • valuelist

  • valuelistConfig

  • visible

  • width

    • Type: int

    • Default Value: 0

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

functionCall

gridConfig

  • enableColResize

  • enableSorting

  • groupUseEntireRow

groupedColumn

hashedFoundset