APEX: Updating Interactive Grid Cells

Moving from the old tabular form to the interactive grid takes some getting used to. Especially when trying to manually update cells with JavaScript.

Here is an example of how to access and modify particular cells in an interactive grid with JavaScript. The example promotes an employee when the Promote link is clicked, which doubles the employee’s salary, and assigns him a new job.

First I built an interactive grid on the EMP table. I’ve used all the defaults except:
Enable editing with Update Row.
Set the region’s static ID to emps.
Added a link column with target type: URL, URL: #

ir-link

The link text is set to Promote, and I added class (ig-link) so that I can connect a dynamic action to it:

ig-link2

Next I created a dynamic action that fires when the Promote link is clicked.

ig-da1

The true action is a Execute JavaScript Code action, with the following code:

[code language=”javascript”]
//Get the link element that was clicked
var $te = $(this.triggeringElement);

//Get the ID of the row
var rowId = $te.closest(‘tr’).data(‘id’);

//Identify the particular interactive grid
var ig$ = apex.region("emps").widget();

//Fetch the model for the interactive grid
var model = ig$.interactiveGrid("getViews","grid").model;

//Fetch the record for the particular rowId
var record = model.getRecord(rowId);

//Access the cell value via the column name
var sal = model.getValue(record,"SAL");

//Set the values for the JOB and SAL cells
model.setValue(record,"JOB",’MANAGER’);
model.setValue(record,"SAL",sal*2);
[/code]

Here is the working example:

emps

It is worth noting that the <tr> element of the interactive grid row contains the row’s unique identifier. This could be a row ID or a primary key value, depending on how you configured the grid.

 

13 thoughts on “APEX: Updating Interactive Grid Cells

  • March 20, 2017 at 4:13 pm
    Permalink

    Thanks, this worked. Any idea how I can change the color of the value selected? I was doing this based on id

    row_id = $(this.triggeringElement ).attr(‘id’);
    $(row_id).prop(‘class’,’operationPending’);

    Reply
  • March 22, 2017 at 1:01 pm
    Permalink

    Hi Christoph,
    Thanks for another 2 cents. I went ahead and followed the tutorial. Everything worked 🙂

    Reply
  • March 23, 2017 at 10:55 am
    Permalink

    Great example of accessing the interactive grid model (the data) , a record and a cell.
    Point is. I-Grid custom code is now JavaScript. No more PL/SAL collections.
    Thanks!

    Reply
  • November 3, 2017 at 9:04 am
    Permalink

    Hi Christoph, I am not very keen on java script, so I did not manage to make your Dynamic action work. When you say “I added class (ig-link)”, what does it mean really ? Just put “Class=”ig.link”” in Link attributes value ? or is there something else to do ? Thanks for your feedback.

    Reply
    • November 3, 2017 at 9:28 am
      Permalink

      You are correct: just put class=”ig.link” into the link attributes. This allows the JavaScript to reference the link.

      Reply
  • November 3, 2017 at 9:57 am
    Permalink

    Thanks Christoph. And what about rowId, ‘tr’, and ‘id’ ? I don’t have any rowid in my select but an Id which is unique (ID_TASK). So could the javascript code become :

    //Get the link element that was clicked
    var $te = $(this.triggeringElement);

    //Get the ID of the row
    var rowId = $te.closest(‘tr’).data(‘ID_TASK’);

    //Identify the particular interactive grid
    var ig$ = apex.region(“emps”).widget();

    //Fetch the model for the interactive grid
    var model = ig$.interactiveGrid(“getViews”,”grid”).model;

    //Fetch the record for the particular rowId
    var record = model.getRecord(rowId); …etc…

    Reply
  • November 6, 2017 at 4:31 am
    Permalink

    Hi Christoph Sorry, What I actually meant was…
    //Get the link element that was clicked
    var $te = $(this.triggeringElement);
    //Get the ID of the row
    var rowId = $te.closest(‘ID_TASK’).data(‘id’);
    //Identify the particular interactive grid
    var ig$ = apex.region(“emps”).widget();
    //Fetch the model for the interactive grid
    var model = ig$.interactiveGrid(“getViews”,”grid”).model;
    //Fetch the record for the particular rowId
    var record = model.getRecord(rowId); …etc…

    Reply
  • November 6, 2017 at 6:07 am
    Permalink

    Hi Christoph, that’s working now, thanks. Except when I click on the “Save” button. I keep searching why (however Editing is enabled)

    Reply
      • November 6, 2017 at 10:29 am
        Permalink

        SAL becomes ‘-‘ and column in database becomes null. When I put directly an amount, for example 1500 (model.setValue(record,”SAL”,1500);), it works.

        Reply
  • November 7, 2017 at 8:18 am
    Permalink

    Hi Christoph, Another issue I got is that when I am on the bottom of a list (I had to scroll down before being on the row), when I click on “Promote”, I am automatically led to the top of the list. Have you got the same behavior?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *