Oracle APEX Interactive Grid Cell Template

Scenario:

I have an interactive grid with 4 columns: prod_ref (select list), prod_name, promo_ref (hidden), and weight.

When prod_ref changes, a dynamic action updates prod_name and promo_ref values.

promo_ref is hidden via the Actions menu.

Requirement: If promo_ref has a value, I want to display an icon next to prod_name.

Current Implementation:

Using a custom cellTemplate on the prod_name column to conditionally show:

The product name

Weight (if available)

A bullhorn icon button (if promo_ref exists)

function(options) {
  options.defaultGridColumnOptions = {
    cellTemplate: `&PRODUCT_NAME. {if WEIGHT/}|| @&WEIGHT.Kg {endif/}
                  {if PROMOTION_REF/}
                    <button type="button"
                            class="t-Button t-Button--noLabel t-Button--icon t-Button--tiny t-Button--success t-Button--link">
                      <span aria-hidden="true" class="t-Icon fa fa-bullhorn"></span>
                    </button>
                  {endif/}`
  }
  return options;
}

Using a model subscription to refresh the grid when weight or promo_ref changes:

model.subscribe({
  onChange: function(changeType, change) {
    if (changeType == 'set') {
      if (change.field === "WEIGHT" || change.field === "PROMOTION_REF") {
        gridView$.grid("refreshColumns").grid("refresh");
      }
    }
  }
});

The Problem:

• The current solution refreshes the entire grid, which causes instability because:

• Other dynamic actions may still be processing

• The grid contains ~100 rows, making full refreshes inefficient

• Using setTimeout() as a workaround hasn't been effective

Desired Solution:

• Is there a way to refresh only the current row (rather than the entire grid) to update:

• The weight display

• The promo icon visibility

This would prevent grid instability while maintaining the required functionality.

Removed code from Model Subscription and added dependsOn column names in Column Initialization Javascript Function

function(options) {
  options.defaultGridColumnOptions = {
    cellTemplate: `&PRODUCT_NAME. {if WEIGHT/}|| @&WEIGHT.Kg {endif/}
{if PROMOTION_REF/}
  <button type="button" onClick="showPromotionInfo( &PROMOTION_REF. );" 
          title="Promotion Details" aria-label="Promotion Details" 
          class="t-Button t-Button--noLabel t-Button--icon t-Button--tiny t-Button--success t-Button--link">
    <span aria-hidden="true" class="t-Icon fa fa-bullhorn"></span>
  </button>
{endif/}`,
    dependsOn: ['WEIGHT','PROMOTION_REF']
  }

  return options;
}