Question 296635 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to get a column list of interactive Grid Oracle APEX

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    You can use the public grid getColumns method in interactivegridcreate event which is fired after the grid has been created with initial data but before apexreadyend/theme42ready. Place code in ‘Function and Global Variable Declaration’.

    (function($){
    $('#main').on("interactivegridcreate", function(jQueryEvent, data) { 
        let igConfig = $(jQueryEvent.target).interactiveGrid('option').config;
        if (igConfig.regionStaticId == 'report-form')
        {
            let gridView = $(jQueryEvent.target).interactiveGrid('getViews').grid;
            let columns = gridView.view$.grid('getColumns');
            let model = gridView.model;     // contains (initial) data set
            for(column of columns)
            {
                //....
            }
        }
    });
})(apex.jQuery);

    The interactivegridviewchange event fires even a little bit earlier with data.created = true, before the first selectionchange event

    $('#main').on("interactivegridviewchange", function(jQueryEvent, data) { 
    if (data && data.created && data.view == 'grid')
    {
        let igConfig = $(jQueryEvent.target).interactiveGrid('option').config;
        //....
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search