How do change behavior of Oracle APEX interactive grid to add row to the top rather than bottom of the grid?

Question

I'm using the standard Oracle APEX Interactive grid. When I click the button to add a new row, it adds the row to the bottom of the list. Which is not convenient. If I select a record first, then click add row, it adds the new row below the selected record.

How do I change the functionality so that adding a row adds the row to the top of the grid?

Adam Kierzkowski Adam Kierzkowski · Accepted Answer · 2020-11-05T18:26:18

You're not mentioning the apex version you use. It shouldn't make a difference, but for the record, I prepared my solution in apex 20.2.

The "Add row" button that you click is originally associated with grid action called "selection-add-row". You can check that by inspecting button element with your browser's developer tools - it should has a data-action attribute set to "selection-add-row".

Actions with context of particular Interactive Grid can be modified via javascript - either during runtime (as for eg. dynamic action) or during Interactive Grid initialization (by using JavaScript Initialization Code property in Advanced section of IG attributes).

You have at least two ways to achieve your goal. The first is to change behavior of "selection-add-row" action. I suggest to use following code as Javascript Initialization code:

function(config) { 
config.initActions = function( actions ) {
  actions.remove('selection-add-row');
  actions.add({
    name: "selection-add-row",
    label: "Add row",
    iconBeforeLabel: "true",
    action: function(event, focusElement) {
      let model = $(actions.context).interactiveGrid('getCurrentView').model;
        model.insertNewRecord();
    }
  });
}
return config;}

It removes the action and adds the new one with the same name. New action adds new row on top of grid instead of adding below selected row. The drawback here is that you're loosing original apex action - but no harm done if you're not panning to use it anyway.

The second solution would be to not remove the original action and create new action that does the same but with different name. In this case you need to somehow change the data-action attribute of "Add row" button to the name of new action (or remove the button completely, and create your own).

More info about actions and whole IG customization: https://docs.oracle.com/en/database/oracle/application-express/20.2/aexjs/interactiveGrid.html

How do change behavior of Oracle APEX interactive grid to add row to the top rather than bottom of the grid?

1 Answers