Home » OrclApex » Oracle Apex: Inserting Records into Interactive Grid Using JavaScript

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:

8 thoughts on “Oracle Apex: Inserting Records into Interactive Grid Using JavaScript”

    1. 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.

    2. 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.

  1. 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

  2. Hay,

    I Can not get Editable Region when create a process "intaractive_grid - autometic row processing DML

    Please help me

  3. Dear brother,
    Hope you are fine.
    Brother I need to insert data to interactive grid by QUERY DATA LIKE CURSOR DATA BEFORE SAVE. THIS DATA BASE ON QUERY DATA RETURN.
    Q1- SELECT EMPLOYEE_NAME,EMPLOYEE_ID FROM EMPLOYEE_INFO WHERE DEPARTMENT_CODE=:P92_DEPT_CODE;
    THIS QUERY RETURN VALUE NEED TO INSERT INTO INTERACTIVE GRID BY :P92_DEPT_CODE DYNAMIC ACTION.

Comments are closed.