Press "Enter" to skip to content

Oracle Apex: Inserting Records into Interactive Grid Using JavaScript

Below is an example to insert records into the interactive grid using the JavaScript in Oracle Apex.

To demonstrate the following example, I have created an interactive grid based on the following table:

Create Table demo_js_insert (
    code_seq    Number,
    code_desc   Varchar2(20)
)
/

Also, I have these non-database items on my page:

  • P2_START_SEQ
  • P2_END_SEQ
  • P2_SEQ_DESC

JavaScript Code Example

Created a button named “InsRecords”, on which I have written the following JavaScript code to insert records into the interactive grid having the static id “ig_js_insert”. I will set the field code_seq value to P2_START_SEQ value and will insert the records until the P2_END_SEQ value. Also, will set the value of a field code_desc to the P2_SEQ_DESC value.

//change the ig_js_insert with the static id of your interactive grid
var widget      = apex.region('ig_js_insert').widget();
var grid        = widget.interactiveGrid('getViews','grid');  
var model       = grid.model; 
var n_code_start, n_code_end, v_desc;

n_code_start = parseInt($v("P2_START_SEQ"), 10);
n_code_end = parseInt($v("P2_END_SEQ"), 10);
v_desc = $v("P2_SEQ_DESC");

for (let i = n_code_start; i <= n_code_end; i++) {
 
    //insert new record on a model
    var myNewRecordId = model.insertNewRecord();

    //get the new record
    var myNewRecord = model.getRecord(myNewRecordId);

    //update record values
    model.setValue(myNewRecord, 'CODE_SEQ', i.toString());
    model.setValue(myNewRecord, 'CODE_DESC', v_desc);

}

Output

Inserting records into an interactive grid using JS in Oracle Apex.

After inserting the records, when the user will click on the Save button, then it will save it to the database table.

Reference:

Related tutorials:

Have you found the answer to your question? If not, you can discuss it with me in the comments section below or join my Q&A community OrclQA.com for developers and ask your question. It is FREE.

Vinish Kapoor

Follow

Hi, I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me; it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub, and get notifications for new posts.

guest
7 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
mudhaffer
mudhaffer
7 months ago

thanks for good solution,

i need to do like this with master detail grids.

mudhaffer
mudhaffer
Reply to  Vinish Kapoor
7 months ago

Dear,
thanks for fast response.
put this is not my question.

my case is to fill row interactive grid using javascript from json with master detail relation.. the post solution is working for one grid.

HASHAAM
HASHAAM
Reply to  mudhaffer
3 months ago

hi..
i want to do the same but could not do this. will you please guide me. how map checked/selected items into interactive grid.

HASHAAM
HASHAAM
3 months ago

Hi.. Need help..
I’ve an Interactive Grid on a page and a button named Collect Record. On click A dialogue page opens and There is interactive report with Checkbox column. Users selects/checks multiple rows and on dialogue close these selected values should be mapped into interactive grid. i’ve done this in APEX 5.1 but in APEX 18 not working. I read your post but this is not working too as I’ve to use ajax callback pl/sql process to fetch records from table that are selected. Please help

Mehedi Hasan
Mehedi Hasan
2 months ago

Hay,

I Can not get Editable Region when create a process “intaractive_grid – autometic row processing DML

Please help me