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


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: