Oracle Apex: Inserting Records into Interactive Grid Using JavaScript

Oracle Apex: Inserting Records into Interactive Grid Using JavaScript

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

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.

Download this project from GitHub

Reference:

Related tutorials:

This Post Has 8 Comments

  1. mudhaffer July 22, 2020

    thanks for good solution,

    i need to do like this with master detail grids.

    2. mudhaffer July 22, 2020

      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.

    3. HASHAAM November 21, 2020

      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.

  2. HASHAAM November 24, 2020

    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

  3. Mehedi Hasan January 8, 2021

    Hay,

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

    Please help me

  4. Alauddin October 1, 2021

    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.