APEX: Updating Interactive Grid Cells
March 9, 2017 at 5:34 pm | Posted in Oracle Developement | 15 CommentsMoving 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: #
The link text is set to Promote, and I added class (ig-link) so that I can connect a dynamic action to it:
Next I created a dynamic action that fires when the Promote link is clicked.
The true action is a Execute JavaScript Code action, with the following code:
//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);
Here is the working example:
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.
15 Comments »
RSS feed for comments on this post. TrackBack URI
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’);
Comment by troy s. model— March 20, 2017 #
Good question! I’ll look into it.
Comment by Christoph Ruepprich— March 23, 2017 #
Hi Christoph,
Thanks for another 2 cents. I went ahead and followed the tutorial. Everything worked 🙂
Comment by 1234rR..— March 22, 2017 #
Sweet! Thanks.
Comment by Christoph Ruepprich— March 23, 2017 #
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.
Comment by Pierre-Antoine Lebeault— November 3, 2017 #
You are correct: just put class=”ig.link” into the link attributes. This allows the JavaScript to reference the link.
Comment by Christoph Ruepprich— November 3, 2017 #
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…
Comment by Pierre-Antoine Lebeault— November 3, 2017 #
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…
Comment by Pierre-Antoine Lebeault— November 6, 2017 #
Hi Christoph, that’s working now, thanks. Except when I click on the “Save” button. I keep searching why (however Editing is enabled)
Comment by Pierre-Antoine Lebeault— November 6, 2017 #
Glad you got it to work. What happens when you click Save?
Comment by Christoph Ruepprich— November 6, 2017 #
SAL becomes ‘-‘ and column in database becomes null. When I put directly an amount, for example 1500 (model.setValue(record,”SAL”,1500);), it works.
Comment by Pierre-Antoine Lebeault— November 6, 2017 #
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?
Comment by Pierre-Antoine Lebeault— November 7, 2017 #
Hi Christoph, how can I pass selected row primary keys to a form in modal dialog?
Comment by Sejal Parikh— April 25, 2018 #
Hi Sejal,
i think you could simply set an apex page item, and then use a dynamic action that fires on a custom event to submit the page and branch to the modal page:
To set the page item use:
In the JavaScript block:
//Set P10_SELECTED_EMPNO to the value of the empno of the selected row
$s(‘P10_SELECTED_EMPNO’,model.getValue(record,”EMPNO”));
//Trigger custom DA to call modal page.
apex.event.trigger(document, “myEvent”);
Create a dynamic action that fires on the custom event “myEvent”
Event: Custom
Custom Event: myEvent
Selection Type: JavaScript Expression
JavaScript Expression: document
Create a true action that submits the page:
Action: Submit Page
Request / button Name: CALL_MODAL
Create a branch that calls the modal page and passes P10_SELECTED_EMPNO:
Behavior:
Type: Page or URL (Redirect)
Target:
Type: Page in this application
Page: 20
Set Items:
Name: P20_EMPNO
Value: &P10_SELECTED_EMPNO.
Comment by Christoph Ruepprich— April 25, 2018 #
[…] APEX: Updating Interactive Grid Cells 2017.03 […]
Pingback by Oracle APEX 系列文章10:Oracle APEX Evangelion(EVA 補完計劃) - 程序員的後花園— June 24, 2018 #