JavaScript API

JavaScript functions are available to interact with Enhanced Grid Pro and its data.

Call functions this way (replace "STATIC_ID" below with the static ID of your Grid region):

let ucGrid = $("#ucGrid_STATIC_ID").ucGrid("instance");
ucGrid.functionName(...)

Or if you're using one of the events listed above (before/after refresh, change, ...), you can do this:

let ucGrid = this.data.ucGrid;
ucGrid.functionName(...)

version()

Show the version of the Enhanced Grid Pro plug-in.

render()

Rerender the grid.

Useful when calling a function (e.g., "addCssClass") with the parameter "render" set to "false" multiple times.

• this way, Grid can only be rendered once (after the last call of "addCssClass") - and not after every call of the function
• Handsontable's "render" function is called (more info).

getData()

Get the grid's data.

Returns an array of arrays with the data.

const ucGrid = $("#ucGrid_STATIC_ID").ucGrid("instance");
ucGrid.getData();
[
    [ "data1", "data2", "data3" ],
    [ "data4", "data5", "data6" ],
    ...
]

Want to get the data as an array of objects with the colname as keys? You can pass asObjects as a parameter:

const ucGrid = $("#ucGrid_STATIC_ID").ucGrid("instance");
ucGrid.getData({ asObjects: true });
[
    { "COL1": "data1", "COL2": "data2", "COL3": "data3" },
    { "COL1": "data4", "COL2": "data5", "COL3": "data6" },
    ...
]

refresh()

Reload data in Grid. This does exaxtly the same as the "Refresh" button in Grid's toolbar.

• Load first set of data again
• In case when there are unsaved changes, ask user what to do (continue or not)

updateData()

Update data in Grid.

• Retrieve data from DB and load it into the Grid
• Keep the scroll position
• In case when there are unsaved changes, they are lost (no questions asked)

refreshRows(rowIndexesArray)

Refresh Row(s) - get value(s) from DB again and set it/them.

Parameter	Description
rowIndexesArray	array of rows' indexes that should be refreshed

getValue(row, columnName)

Get the value at a specific cell.

Parameter	Description
row	Row index within Grid
columnName	Column name

setValue(dataArray, pSuppressChangeEvent=false)

Set value(s).

Parameter	Description
dataArray	[[row, columnName, value], ...] row - row index within Grid columnName - column name value - new value of the cell
[pSuppressChangeEvent]	Optional. Default: false

//Example for select list column:
ucGrid.setValue( [[rowIndex, columnName, [{ "d": "Display Value", "r": 999}] ]] );

enableRow(row, render=true)

Enable {row}.

Parameter	Description
row	Row index within Grid
[render]	Optional. Default: true. Flag whether to render the Grid at the end. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

enableRowColumn(row, columnName, render=true)

Enable {columnName} at given {row} index.

Parameter	Description
row	Row index within Grid
columnName	Column name
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

disableRow(row, render=true)

Disable {row}.

Parameter	Description
row	Row index within Grid
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

disableRowColumn(row, columnName, render=true)

• Disable {columnName} at given {row} index.

Parameter	Description
row	Row index within Grid
columnName	Column name
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

isColumnReadOnly(columnName)

• Check if Grid's {columnName} is readOnly (disabled).

Parameter	Description
columnName	Column name

isCellReadOnly(row, columnName)

• Check if Grid's cell - {columnName} at given {row} index - is readOnly (disabled).

Parameter	Description
row	Row index within Grid
columnName	Column name

addCssClass(row, columnName, classToAdd, render=true)

Add CSS class {classToAdd} to the cell at ({row}, {columnName}).

Parameter	Description
row	Row index within Grid
columnName	Column name
classToAdd	CSS class name to be added
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

addCssClassToRow(row, classToAdd, render=true)

Add CSS class {classToAdd} to all columns in {row}.

Parameter	Description
row	Row index within Grid
classToAdd	CSS class name to be added
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call of it (it's much faster this way)

addCssClassToColumn(columnName, classToAdd, render=true)

Add CSS class {classToAdd} to {columnName} in all rows.

Parameter	Description
columnName	Column name
classToAdd	CSS class name to be added
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call of it (it's much faster this way)

removeCssClass(row, columnName, classToRemove, render=true)

Remove CSS class {classToRemove} from the cell at ({row}, {columnName}).

Parameter	Description
row	Row index within Grid
columnName	Column name
classToRemove	CSS class name to be removed
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

removeCssClassFromRow(row, classToRemove, render=true)

Remove CSS class {classToRemove} from all columns in {row}.

Parameter	Description
row	Row index within Grid
classToRemove	CSS class name to be removed
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

removeCssClassFromColumn(columnName, classToRemove, render=true)

Remove CSS class {classToRemove} from {columnName} in all rows.

Parameter	Description
columnName	Column name
classToRemove	CSS class name to be removed
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

setTooltip(row, columnName, tooltipText, render=true)

Set the tooltip of a cell at ({row}, {columnName}). Supports HTML.

Parameter	Description
row	Row index within Grid
columnName	Column name
tooltipText	Tooltip text
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

Example - render tooltip on all columns:

const ucGrid = $("#ucGrid_STATIC_ID").ucGrid("instance");
const data = grid.getData({ asObjects: true });
apex.debug.info("Adding tooltips to grid", {
	ucGrid,
	data,
});

let rowNo = 0;

// loop over rows
for (const row of data) {
    // loop over columns
	for (const [colName, value] of Object.entries(row)) {
		let tooltip = value;

        // for select list columns, concat all display values
		if (Array.isArray(value)) {
			apex.debug.info("value is LOV", value);
			// join all values with comma
			tooltip = value.map((v) => v?.d).join(", ");
		}

		apex.debug.info("Adding tooltip to column", {
			rowNo,
			colName,
			tooltip,
		});

        // performance: don't re-render the grid after each tooltip
		ucGrid.setTooltip(rowNo, colName, tooltip, false);
	}
	rowNo++;
}

// performance: re-render the grid only once at the end
ucGrid.render();

removeTooltip(row, columnName, tooltipText, render=true)

Remove any previously set tooltip of a cell at ({row}, {columnName}).

Parameter	Description
row	Row index within Grid
columnName	Column name
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

hideColumn(columnName, render=true)

Hide column {columnName}.

Parameter	Description
columnName	Column name
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

showColumn(columnName, render=true)

Show column {columnName}.

Parameter	Description
columnName	Column name
[render]	Optional. Default: true. Flag whether to render the Grid at the end or not. When multiple calls to the function are done, you would want to render the Grid only after the last call (it's much faster this way)

getSelected()

Get the selected cell(s).

Returns indexes of the currently selected cells as an array of arrays [[startRow, startCol, endRow, endCol],...].

getSelectedRows()

Get the selected rows.

Returns array with row indexes.

setValidationFunction(columnName, validationFunction)

Set {validationFunction} to given {columnName}.

Parameter	Description
columnName	Column name
validationFunction	Function (with two parameters) to validate data. See the example below.

Example:

function validateColSalary(newValue, rowIdx, rowData) {
    if (newValue < 1000 || newValue > 2000) {
        return "Salary must be between 1000 and 2000";
    }
}

Parameter	Description
newValue	Value of edited
rowIdx	Numerical row index
rowData	Object with the column ID as keys and their values. Note that the changed column value is still the old one. Check newValue for validations.

Full implemetation example:

const ucGrid = $("#ucGrid_STATIC_ID").ucGrid("instance");

ucGrid.setValidationFunction("SAL", (newValue, rowIdx, rowData) => {
	apex.debug.info("Validation function for SAL", {
		newValue,
		rowIdx,
		rowData,
	});

	if (newValue >= 10 && rowData.JOB !== "Manager") {
        // return error message
		return "Sal must be less than 10";
	}
});

save(originalRequest)

Save data in Grid. Only does something if there are changes to be saved.

Parameter	Description
[originalRequest]	Optional. If provided, page will be submitted with request name {originalRequest} once the Grid's data is successfully saved.

The save function returns a promise that you can await / .then() if you need to wait for the save to complete.

const ucGrid = $("#ucGrid_STATIC_ID").ucGrid("instance");

async function saveGrid() {
	await ucGrid.save();

	// do something after save is completed

	// wrap it in try-catch to catch errors
}

saveGrid();

// if you don't need to wait for the save to complete, you can call it without async/await
ucGrid.save();

reset()

Reset config (sort, filter) and load data again.

getFiltersUsed()

Available from v24.1.

Returns all filters that are currently used - as JavaScript array.