Refresh IG (Interactive Grid) Column Header in Oracle APEX

In this article, we are going to see how to refresh IG (Interactive grid) header using JavaScript without page submission in Oracle APEX. In that end of the page, I have given demo application for your reference.

Now the following step will get you there to achieve your objective.

Step1:
  • create an Interactive grid in Apex and set "Static ID" for that region. for example, I have given my IG region id is 'emp'. Similarly set a "Static ID" for a column in which you want to refresh a header column. For example, I have given a static id to ename column 'ENAME'.



Step 2:

  • Create a button and set dynamic action "onclick event" for that button to achieve our objective. In that dynamic action event, create 'Execute JavaScript Code' action and paste the following code:

  •  In the above-given JavaScript Code, emp and ENAME are the Static ID for corresponding region and column.
  • After placing the JS code set 'Affected Element' to that particular region in that JavaScript Property.
That's it. Now you can run the application to which will refresh the header name correctly when you click the button. 


If you have any clarification or doubt or anything else, just leave a message in the comments box.

8 comments:

  1. Yes, the code should be put in text instead of image, so that we can copy it easily. Good post!

    ReplyDelete
  2. Here's the code for copy-paste purposes

    var indx = apex.region('emp').widget().interactiveGrid("getViews", "grid").model.getFieldKey('ENAME');

    var colIndx;
    var gridColumns = apex.region('emp').widget().interactiveGrid("getViews").grid.view$.grid("getColumns");

    for (var i = 0, len = gridColumns.length; i < len; i++)
    {
    if (gridColumns[i].index === indx) colIndx = i;
    }

    apex.region('emp').widget().interactiveGrid("getViews").grid.view$.grid("getColumns")[colIndx].heading = 'TEST_VALUE';

    $('#ENAME_HDR").text('TEST_VALUE1');

    ReplyDelete
    Replies
    1. just only --
      static id for column col1
      $('#col1_HDR').text( 'new name' );

      Delete
  3. I am new to APEX. So please excuse the basic question. What is this line of code doing?
    apex.region('emp').widget().interactiveGrid("getViews").grid.view$.grid("getColumns")[colIndx].heading = 'TEST_VALUE';

    ReplyDelete
  4. Hi! i have tried this method and is not working, i have written the javascript code mentioned in the "code editor - function and global variable declaration" at the Javascript section which is on the features of the Page, then I have set the static ID for the Interactive Grid and for the column,then i have created a dynamic action on page change[Interactive Grid], it execute a javascript code, and here i invoke the function mentioned in the begginnig.
    I'm using Apex 20.1.0.00.13

    this is the function:
    function asignar_titulo(){
    var indx = apex.region('IG_comparativo_saldo_cartera_sucursal').widget().interactiveGrid("getViews","grid").model.getFieldKey('TOTALPARAMETROBASE');
    var colIndx;
    var gridColumns = apex.region('IG_comparativo_saldo_cartera_sucursal').widget().interactiveGrid("getViews").grid.view$.grid("getColumns");
    for (var i=0, len = gridColumns.length;i++)
    {
    if (gridColumns[i].index === indx) colIndx = i;
    }
    apex.region('emp').widget().interactiveGrid("getViews").grid.view$.grid("getColumns")[colIndx].heading = 'TEST_VALUE';

    $('#TOTALPARAMETROBASE_HDR').text('TEST_VALUE1');

    };

    ReplyDelete
  5. excellent approach thanks for sharing this out.

    ReplyDelete