AGGrid_Lib - Documentation (ODC)

Stable version 1.0.1 (Compatible with ODC)

Uploaded on 23 December 2025 by Product League

Documentation

1.0.1

Getting Started

You can start using the grid by adding the AGGrid block from AGGrid_Lib to your app.
Once you get your data via an aggregate/data action, serialize it into JSON.
Make sure to enable "Serialize Default Values" property because otherwise there won't be a JS object to store a value into when editing an empty field in the grid.
Pass the JSON to the grid's "In_JSONForData" input parameter.
That's it! You can change other input parameters of the grid block to change the look and feel of the grid according to your needs.
This is the implementation of a static AG-Grid, meaning we know beforehand what columns to show on the grid.
Thus, we pass each of our columns within the ColumnDefinitions parameter along with other Grid Options within a big input parameter called "In_GridOptions".
You can change the behavior of the grid or the way data is displayed by changing any of these parameters.

Please check out the demo app to see it in use!

Updating Grid Properties After Initialization

AG-Grid has extensive documentation for its Grid API. Many Excel-like functions are available through its API.
Here we will discover the examples we've built for this demo.

Firstly, we need the GridObject to reach the API of the library to call additional functions such as changing the grid options.
The GridObject is already available to us in the screen context, as it was exposed by the AGGrid block via the ExposeGridObj event upon its initialization.
We create a screen client action "AgGrid_CustomizeGrid" and call it whenever we need to change the data or styling of the grid.
In our use case, we get certain dropdown data with an additional data action "GetDropdownData" and we want to use this data in some columns of the grid.
Thus, we can customize the grid right after fetching the dropdown data by calling this client action in the OnAfterFetch of GetDropdownData.
In the client action, we use a JS node that would take advantage of certain Grid API functions:
We pass the JSON-serialized dropdown lists to the node.
Inside the node, we create a JS function "makeColumnEditable". We map this function to the "column definitions" of the grid that we got with the help of the getGridOption function. This means that the function will run for each column definition.
After mapping, we set the updated column definition back to the grid with the setGridOption function.
When the function runs while iterating for each column item, it checks the name of the current field and if it's the field that we want to turn into a dropdown (in our use case, Color and Category), we set the "cellEditor" property of the item to "agSelectCellEditor".
Similarly, we pass the incoming JSON values to the item.cellEditorParams.value property to prompt the grid what to show in the dropdown

Editing Cell Values of the Grid

Another use case that we have in this demo is the editing capabilities of the grid.

To make the grid cells editable, we use a similar approach to change the grid options.
In the same "Customize_Grid" JS node, we create another JS function "cellEdited".
This function will be called when a cell value changes. It will mark the cell as "isEdited = true" only if the value actually changed and will also change its styling.
As in the previous approach, we get the "default column definitions" grid option via the API to set its "onCellValueChanged" handler to our new cellEdited function.
This means that when a grid cell is double-clicked and its value is changed, our function will run.
In this function, we can do the following:
- Set the cell as "isEdited = true", so that we can later fetch all the edited cells' values.
- Set the cellClass of the column definition to the out-of-the-box "ag-cell-dirty" CSS class to display a little blue dot next to the cell's content to indicate the edited cells to the user
- Only refresh the currently edited cell to apply the style change.
- Call a screen client action such as "OnChange_CellValue" to gather the edited cells' new values and collect them in a local list.
In the "OnChange_CellValue" client action, which accepts "params" of the grid as input, we can see all the details of grid cells.
For example, we can see the previous values vs. current values of the (changed) cells, or to which column and row the cell belongs.
Here we can collect all the edited cells' values and later pass them to a server action when it's time to save the changes.

Please check out the implementation of JS nodes in the main demo screen to see these explanations in action.

Under the Hood

How did we create a JavaScript Data Grid by using the AG-Grid library?

Created a general JavaScript file in AGGrid_Lib with the content of the library: "Ag Charts Community minified v11.3.2", and selected it as a Required Script for our AGGrid block.
To download the latest version, you can use this GitHub Repository link.
The library can also be referred from CDN, by including the following script tags in your HTML file:
Created a container div in the block. This is the only HTML element needed to load the grid. The library takes care of initializing the grid in this container.
The div should have a height because the data grid will fill the size of the parent container. This height value can be set as an input parameter of the block (default: 400px)
To create the grid instance inside of the div container, "createGrid" JS function is used, which takes 2 input parameters: our container as HTML element, and the gridOptions passed as an input to our AGGrid block.
We need to make sure that our div container for the grid is already rendered before the createGrid function is called.
To ensure this, we utilize the "componentDidMount" react event on the container and call the initialization functions only after that event is triggered.
To call the "createGrid" library function, we used an "Init" JS node in the ComponentDidMount action.
This node is also responsible for things like:
- setting the Grid License Key (in case the Enterprise Edition is used)
- setting a theme to the grid (optional)
- parsing the passed GridOptions
- parsing the passed RawData and appending it as "rowData" to the GridOptions object
GridOptions is a key object for our grid, which contains all of the Data Grid configurations.

In the ComponentDidMount action, we also make sure to set the "GridObject" local variable (of type Object).
We set it with the output that we return from the Init JS node.
This output is just the return value of the createGrid library function.
It is important to keep the GridObject ready, as we can reach the Grid API via this object to use the wide selection of functions.
To make sure that the new data and grid options are applied, we also run another JS node in the OnParametersChanged of our block.
Here, we parse the passed raw data JSON and set it to the "rowData" grid option.
It is possible to change certain GridOptions even after the grid is initialized.
Some examples are explained in the section Updating grid properties after initialization.

Please check out the official documentation for more details.

AGGrid_Lib (ODC)

AGGrid_Lib (ODC)