Oracle Apex Interactive Grid: Create Custom Add Edit Save and Delete Buttons

In this tutorial, you will learn how to create custom Add, Edit, Save, and Delete buttons for an Interactive Grid in Oracle Apex. And all these buttons will execute the JavaScript code to perform Add, Edit, Save, and Delete row functions. But now you may have a question, that why we should create custom buttons when we have the default buttons enabled for an Interactive Grid in Oracle Apex? And you are right, but in software development, you never know what kind of a requirement can come from the client for customization and then you have to create custom buttons to take more control over it. To perform this task, follow these steps:

Steps to Create Custom Add, Edit, Save and, Delete Buttons for an Interactive Grid in Oracle Apex

To demonstrate this example, I am using the following EMPLOYEES table for the interactive grid. You can create it in your schema to test this example:

CREATE TABLE  "EMPLOYEES" 
   (	"EMPLOYEE_ID" NUMBER(6,0), 
	"FIRST_NAME" VARCHAR2(20), 
	"LAST_NAME" VARCHAR2(25), 
	"EMAIL" VARCHAR2(25), 
	"PHONE_NUMBER" VARCHAR2(20), 
	"HIRE_DATE" DATE, 
	"JOB_ID" VARCHAR2(10), 
	"SALARY" NUMBER(8,2), 
	"COMMISSION_PCT" NUMBER(2,2), 
	"MANAGER_ID" NUMBER(6,0), 
	"DEPARTMENT_ID" NUMBER(4,0)
   )
/

1. Create an Interactive Grid in Oracle Apex Page

Create an Interactive grid based on the following query:

select ROWID,
       EMPLOYEE_ID,
       FIRST_NAME,
       LAST_NAME,
       EMAIL,
       PHONE_NUMBER,
       HIRE_DATE,
       JOB_ID,
       SALARY,
       COMMISSION_PCT,
       MANAGER_ID,
       DEPARTMENT_ID
  from EMPLOYEES

Then set the Static ID and Template for the Interactive Grid Region:

Advanced > Static ID: ig_emp
Appearance > Template: Standard

Then click on the Attributes node and set the following properties:

Edit Enabled: Yes (Put on the switch)
Toolbar: (Put off the switch)

2. Create an Add button for the Interactive Grid

Do the right-click on the interactive grid region and select the option Create Button and set the following properties:

Button Name: Add
Label: Add
Button Position: Copy

3. Create an Edit button for the Interactive Grid

Do the right-click on the region buttons and select the option Create Button and set the following properties:

Button Name: Edit
Label: Edit
Button Position: Copy

4. Create a Save button for the Interactive Grid

Do the right-click on the region buttons and select the option Create Button and set the following properties:

Button Name: Save
Label: Save
Button Position: Copy

5. Create a Delete button for the Interactive Grid

Do the right-click on the region buttons and select the option Create Button and set the following properties:

Button Name: Delete
Label: Delete
Button Position: Copy

We have created the buttons, now we will create the dynamic actions to execute the JavaScript code for each button function.

6. Create Dynamic Action for Add button (Created in the 2nd step)

Do the right-click on the Add button and select Create Dynamic Action option and set the following properties:

Action: Execute JavaScript Code
Code: Add the below JavaScript code into it:

apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).invoke( "selection-add-row" );

Notice, that we have specified the interactive grid static id "ig_emp" in the above JavaScript code.

7. Create Dynamic Action for Edit Button (Created in the 3rd Step)

Do the right-click on the Edit button and select Create Dynamic Action option and set the following properties:

Action: Execute JavaScript Code
Code: Add the below JavaScript code into it:

apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).set("edit", true);

Now when the user will click on the Edit button, the edit mode will be enabled for the interactive grid.

8. Create Dynamic Action for Save Button (Created in the 4th Step)

Do the right-click on the Save button and select Create Dynamic Action option and set the following properties:

Action: Execute JavaScript Code
Code: Add the below JavaScript code into it:

apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).invoke( "save" );

9. Create Dynamic Action for Delete Button (Created in the 5th Step)

Do the right-click on the Delete button and select Create Dynamic Action option and set the following properties:

Action: Execute JavaScript Code
Code: Add the below JavaScript code into it:

apex.region( "ig_emp" ).widget().interactiveGrid( "getActions" ).invoke( "selection-delete" );

Now save the changes and run the page, all the buttons should work properly for the interactive grid.

To enhance functionality more, you can hide the Save button initially and only show when the Add, Edit, or Delete button is clicked. To do this, follow these steps:

10. Create Dynamic Action on Page Load to Hide the Save Button

Click on the Dynamic Actions tab, then do the right-click on the Page Load node and select Create Dynamic Action option and set the following properties:

Action: Hide
Selection Type: Button
Button: Save

11. Create One More True Action for Add Button

Action: Show
Selection Type: Button
Button: Save

12. Create One More True Action for Edit Button

Action: Show
Selection Type: Button
Button: Save

13. Create One More True Action for Delete Button

Action: Show
Selection Type: Button
Button: Save

14. Create Dynamic Action for Interactive Grid

Do the right-click on the Interactive Grid and select Create Dynamic Action option and set the following properties:

Event: Save [Interactive Grid]
Action: Hide
Selection Type: Button
Button: Save

Save the changes and run the page to test. Now you will find that the Save button is hidden and the Add, Edit, and Delete buttons are visible. And now when you will click on the Add, Edit, or Delete button then the Save button will be visible and after clicking on the Save button the Save button will hide again.

The output of the Interactive Grid with Custom Buttons

This Post Has 27 Comments

George September 17, 2020
Hello, how would it be to add a button to do a custom filter.
For example, the filter in an employees table is:
State = 'New York'
1. Vinish Kapoor September 17, 2020
  To do this, you can add a static region above the interactive grid.
  Then add a list item and specify the source, for example:
  Select state d, state r from state_master order by state
  Add a where clause to your IG, for example:
  Where state = nvl(:Px_LISTITEM, state)
  Create a dynamic action on the list item for change event. Select the action as Refresh, select type as Region and specify your IG region.
  It should work as you need.
2. George September 18, 2020
  Hi Vinish,
  I have created an item of type Popup LOV with static values in the static region.
  Associate a DA to the "change" event of the PopupLOV item.
  DA has a "Refresh" event for the region that contains the IG
  "Refresh" event is executed fine every time I change value in PopupLOV
  But in the SQL code of the IG it does not bring the value chosen in the PopupLOV.
  I also tested it with a simple SQL and it shows it as null.
  DECLARE
  BEGIN
  Apex_debug.message ('VALUE OF P29_STATE1 ' ||: P29_STATE1);
  END;
  (: P29_ESTADO1 is the PopupLOV item)
  Any ideas ?
3. Vinish Kapoor September 18, 2020
  In your above code, I can see a space between colon and item name why?
  It should be only :P29_STATE1
  One more thing: in ITEMS TO SUBMIT please add the item P29_STATE1
  You will find this property below where clause of interactive grid.
  Try this and let me know.
4. George September 18, 2020
  There was no space, I leave it like this the copy / paste.
  I work fine defining the ITEMS TO SUBMIT as P29_STATE1
  Thank you very much
Zakariaa SADEK September 28, 2020
Hello , i had to use an interactive Grid , and i want to use PLSQL code to process some columns before inserting them (eg concat first name+last name and insert in as a full name in DB ) .Do you have an example of this kind of code ( for inserting multiple values at the same time ) .Thanks
1. Vinish Kapoor September 28, 2020
  You should use before insert database trigger for your requirement.
  You will be easily able to manipulate data before insertion.
Martin October 2, 2020
Thanks for all this. I wanted to just add the Add and Save buttons. However, when I enter the Javascripts lines for these, the page doesn't display anymore. If I leave just the script out but keep everything else it's fine. I'm using Apex 19.2 so is the JS code the same?
1. Vinish Kapoor October 2, 2020
  Yes the JS code is same.
  You need to find the exact error. At runtime, if any error on the page, it shows the red icon bottom of the page.
  Try to inspect element and click on the console tab, there you will get the full error information.
  Then let me know, what exactly the error is.
2. Martin October 2, 2020
  Thanks for the quick reply. I'm fairly new to Apex so could easily be making a mistake somewhere. After opening the console, I see this error, which is pretty non-desciptive as jQuery in loaded in min mode.
  desktop_all.min.js?v=19.2.0.00.18:formatted:1551 Uncaught TypeError: Object.defineProperty called on non-object at Function.defineProperty (<anonymous>) at Y.cache (desktop_all.min.js?v=19.2.0.00.18:formatted:1551) at Y.get (desktop_all.min.js?v=19.2.0.00.18:formatted:1567) at Object.add (desktop_all.min.js?v=19.2.0.00.18:formatted:1944) at Boolean.<anonymous> (desktop_all.min.js?v=19.2.0.00.18:formatted:1912) at Function.each (desktop_all.min.js?v=19.2.0.00.18:formatted:146) at k.fn.init.each (desktop_all.min.js?v=19.2.0.00.18:formatted:74) at Ae (desktop_all.min.js?v=19.2.0.00.18:formatted:1911) at k.fn.init.on (desktop_all.min.js?v=19.2.0.00.18:formatted:2215) at Object.<anonymous> (desktop_all.min.js?v=19.2.0.00.18:formatted:8772)
  The JS code I've added is
  apex.region( "ig_groups" ).widget().interactiveGrid( "getActions" ).invoke( "selection-add-row" );
  I've also added some (combined) screenshots of the design to see if I've put thngs in the right place. Hope it helps 🙂
3. Vinish Kapoor October 2, 2020
  Oh got it. Your dynamic action for the button is wrong.
  You didn't follow the instructions. Now do these things:
  Delete the DA ADDR.
  Then do the right-click on your ADD button and select the option Create Dynamic Action.
  A true action by default will be created, change it to Execute JavaScript code.
  Then add the following JavaScript code in it:
  apex.region( "ig_groups" ).widget().interactiveGrid( "getActions" ).invoke( "selection-add-row" );
  Do only what I mentioned, it will be ok.
4. Martin Walke October 3, 2020
  Hi Vinish,
  Many thanks for that, I'll give it a try. BTW, the DA_ADDR is there from one of your other excellent tutorials and you don't explicitly say attach the js code to the True action. Keep up the good work though, it's brilliant for novices like myself, particularly in my case where I didn't want the standard controls to confuse the end user.
5. Vinish Kapoor October 4, 2020
  Oh ok and sorry if I didn't explained well in any of my tutorial.
  Actually, your DA selection type was wrong. It should be the button but it was selected as JavaScript expression.
  But if you still face any issues, please let me know.
Benjie November 17, 2020
Hello, is there a way to implement it in all of my tables? Without create it manually everytime. Like DRY.
SamSam December 3, 2020
Hello,
Thank you for this usefull post. I need help please :
I have a intercative grid with my Save button. I would like to hide this button if the IG is empty and show it if the IG return rows. How can I do please ?
1. SamSam December 7, 2020
  Hello,
  I have written this code :
  var selectedRecords1 = apex.region("GRID_ID").widget().interactiveGrid("getViews","grid").getSelectedRecords();
      if (selectedRecords1.length == 0)
      {
          $x_Hide("Button");
      } else {
          $x_Show("Button");
      }
  But the problem is that It doesn't work with any event and I tried them all !
  Any help please ?
  Thanks
2. SamSam December 10, 2020
  Finally, this is the solution :
  
      var model = apex.region("tab_ir").widget().interactiveGrid("getViews","grid").model;
      lcount = model.getServerTotalRecords();
      alert("Nombre total de lignes : " + lcount);
      if (lcount > 0)
      {
          $x_Show("btn_id");
      } else
      {
          $x_Hide("btn_id");
      }
  and it works !
Oscar February 28, 2021
Hi,
Thank you for your detailed solution, helps a lot for newbie like me.
I have a page with custom search button which populates 2 independent Interactive grids (IGs).
I had used igutils.js plug-in earlier when I had search and one Interactive grid - which works great. When I make a change in the grid and hit search button instead of save, it will show a popup, do you want to save your changes....
This does not work with 2 IGs. Any solution is greatly appreciated.
Thanks,
Oscar.
Nupur April 15, 2021
I am not able to see Button Position: Copy while creating new custom butto
Axel May 21, 2021
i made the same thinks like you did in the Tutorial but i get a Error code:
Ajax call has server error ORA-20987: APEX - ORA-01031: Insufficient permissions - Contact the application administrator. For details about this incident, see debugging ID "2838030". returned for.
Maybe some one can help me
apex123 May 23, 2021
what is the query for fetching the data based on user input on the form and after clicking the button save, data will display on the interactive grid? thanks
Anand May 29, 2021
Hi Vinish,
I'm working on Apex 20.1.
I did not found delete button with IG hence I used your code. And I created delete button only.
Now delete button is working fine before saving the record. Although it still throws javascript error "Cannot read property 'length' of undefined".
But the main problem is after saving records, I'm not able to update any record. So, after row selection if I click on Delete button, nothing happens.
Please help.
shaikrvn June 14, 2021
Hello,
Similarly shall we add the custom search bar and Actions which are available under Grid toolbar?
Thanks
shaikrvn June 14, 2021
Hello,
Thanks for the solution
how to hide only the default Add/Edit/Save & Delete buttons but not the search All text columns(Search Bar) and Actions one.
Thanks
Sohail August 27, 2021
Hello,
How to record the rows deleted by Apex 19.2 IG in the audit table of the Oracle database.
Theresa November 20, 2021
I just need the add and delete button for now.
I created my ig.
static id = ig_FixedAmt
Created a button called Add
Created a button called Delete
Right clicked on the Add button
Create a dynamic action named AddClicked
Action: Javascript Expression
Code: apex.region( "ig_FixedAmt" ).widget().interactiveGrid( "getActions" ).invoke( "selection-add-row" );
Right clicked on the Delete button
Create a dynamic action named DeleteClicked
Action: Javascript Expression
Code: apex.region( "ig_FixedAmt" ).widget().interactiveGrid( "getActions" ).invoke( "selection-delete" );
Save - run page - click on add button: 1 row is added.
click the Add button again without entering any data (because I know my users will do that) and I get this error:
Uncaught TypeError: Cannot read properties of null (reading 'fields')
at a..._deactivateCell (interactiveGrid.min.js:11)
at a..._deactivateCell (desktop_all.min.js:27)
at a...focusin (interactiveGrid.min.js:9)
at HTMLDivElement.h (desktop_all.min.js:27)
at HTMLDivElement.dispatch (desktop_all.min.js:2)
at HTMLDivElement.v.handle (desktop_all.min.js:2)
at Object.trigger (desktop_all.min.js:2)
at Object.simulate (desktop_all.min.js:2)
at HTMLDocument.i (desktop_all.min.js:2)
at a..._setFocus (interactiveGrid.min.js:11)
1. Vinish Kapoor November 20, 2021
  Add one more True action for Add button to hide that button. And on page submit create a DA to show it.