How to get a column list of interactive Grid Oracle APEX

Question

I want to hide/show columns in my interactive grid depending on condition. So far I wrote this:

function Filter_columns(column_name)
{
  var grid = apex.region("report-form").widget().interactiveGrid("getViews", "grid");

  var col_total = grid.model.getRecordValue("t1000", column_name).replace(',', '.');
  
  if (parseFloat(col_total))
    grid.view$.grid("showColumn", column_name);
  else
    grid.view$.grid("hideColumn", column_name);
}

If total sum by column equals 0, then hide it, otherwise show it. I am trying to compress table because it has 74 columns. Next step is to iterate through all columns. Obviously I can make an array of column names and iterate it, but is there a "proper" way to get column list of interactive grid? Apex version 23.2.0.

Answer 1

After searching extensively Oracle APEX JavaScript API Reference, I updated my function:

function Filter_columns()
{
  var grid = apex.region("report-form").widget().interactiveGrid("getViews", "grid");

  for(column of grid.view$.grid("getColumns"))
  {
    if (column.property.startsWith("APEX$") || column.property.startsWith("_")) continue;

    var result = grid.model.getRecordValue("t1000", column.property).replace(',', '.');
    
    if (parseFloat(result))
      grid.view$.grid("showColumn", column.property);
    else
      grid.view$.grid("hideColumn", column.property);
  }
}

It works if i call it from console. But when I add this function to "Execute when Page Loads" section, I get this exception:

Uncaught TypeError: Cannot read properties of null (reading '1')
    at Object.getValue (modelViewBase.min.js?v=23.2.0:1:24305)
    at Object.getRecordValue (modelViewBase.min.js?v=23.2.0:1:25998)
    at Filter_columns (test-data-set-6-form?session=4950585766526:512:29)
    at Object.javascriptFunction (test-data-set-6-form?session=4950585766526:493:192)
    at e.doAction (desktop_all.min.js?v=23.2.0:24:5085)
    at e.doActions (desktop_all.min.js?v=23.2.0:24:3515)
    at HTMLDocument.<anonymous> (desktop_all.min.js?v=23.2.0:24:2191)
    at Function.each (desktop_all.min.js?v=23.2.0:2:3003)
    at S.fn.init.each (desktop_all.min.js?v=23.2.0:2:1481)
    at e.actions (desktop_all.min.js?v=23.2.0:24:2031)

Edit: I used async call with delay:

function delay(func, delay_ms) {
  return new Promise(() => {
    setTimeout(() => func(), delay_ms);
  });
}

async function asyncCall()
{
  await delay(Filter_columns, 500);
}

And then added asyncCall() to Execute when Page Loads.