How to refresh particular cell in oj-data-grid

We can use the update event to refresh particular grid cells.

Let us say we are displaying a grid with few rows where the user can edit the data and we are showing few calculated fields (like total or percentage). If we have to refresh the grid cells after updating the cell with the correct value, we can use the following JavaScript code:

// "gridData" is a variable holding grid information. 
// We can pass "gridData" to the JS function and call the below code.

let updateEventDetails = {
"type": "update",
"detail": {
    "ranges": [{
            "rowOffset": 0,      // start of grid row
            "columnOffset": 0,   // start of grid col
            "rowCount":  gridData.counts.row // end of grid row
            "columnCount": gridData.counts.column // end of grid col 
       }]
    }
};
gridData.dispatchEvent(updateEventDetails);

The above code will refresh all the grid cells; if we want to refresh only a particular grid cell, we can set relative rowOffset, columnOffset, rowCount or columnCount.

We can also give multiple ranges if the cells cannot be captured in a single range.

When we use the refresh event on the grid, the grid becomes white and renders again. In order to avoid that, we use the update event. The update event doesn’t remove the focus, and only the cells in range will get refreshed.

If you have a huge amount of data in the grid, use the update event very rarely. It has a huge impact on performance. If you want a large number of cells to be refreshed, use the refresh event instead of the update event.

References:

Data Grid Cookbook: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=dataGrid&demo=overView

ojDataGrid JS doc: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojDataGrid.html

DataGridProviderUpdateEvent: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/DataGridProviderUpdateEvent.html