Interactive Grid : Get current selected row value into page item.

In Oracle APEX, interactive grid is one of the complex topics which extensively use JavaScript and JQuery.

Today in this blog I am going to discuss a very common example of IG where we have to get a column value (cell value) into a page item for the current selected row in the IG

After getting the cell value into a page item we can utilize it in various conditions or in sql queries.

Step 1: Create an interactive grid based on a query.

Step 2: Create a Dynamic Action on this interactive grid.

Event : Selection Change [Interactive Grid]

True Action : Execute JavaScript Code

Code:

var df;
df = this.data.model.getValue(this.data.selectedRecords[0], "FIRST_NAME");
apex.item("P1_FIRST_NAME").setValue(df);

A variable "df" is declared in the code.

"df" will get the value of FIRST_NAME column of the current row only.

Page item P1_FIRST_NAME will be populated with "df" value.

Now as soon as you move across the IG, the page item will be populated with new value of current row.

Next Use Case :

In case you want to get multiple selected IDs from an interactive grid and process them, use the following code:

Create a Dynamic Action on the interactive grid.

Event : Selection Change [Interactive Grid]

True Action : Execute JavaScript Code

Fire on initialization : No

Code:

var i, i_emp_ids = ":", i_emp_id,
model = this.data.model;
for ( i = 0; i < this.data.selectedRecords.length; i++ ) 
{
i_emp_ids += model.getValue( this.data.selectedRecords[i], "EMPNO") + ":";
}
apex.item("P1_EMPIDS").setValue (i_emp_ids);

For selecting multiple values, we have to use "for" loops which will run till the number of records selected

I hope this was useful.

Thanks for reading my blog !!