Tuesday 12 December 2017

Preserve checked checkbox in collection - Interactive Grid

The latest interactive grid of oracle APEX comes with so many different possibilities to play with.

Thanks to Oracle Application Express developer team we can use this "Fabulous" feature. For someone who does not know what is Interactive Grid  here is the link to explorer more.

Here we are going to collect selected data from interactive grid and add them into the collection using our custom made button.

To do so first we need to create a Interactive grid based on EMP table (or any other table - PK empno in this example) which do have EDIT option selected to yes.After creating the grid give it a static id (in my case i have given "pg_10_ig_emp" which describes (pg10(page_10),ig(interactive grid),emp(based on emp table)).

For some one who does not know how to work with javascript please go through this links which are very helpful.

orclapex-ig-cheat-sheet
how to hack apex interactive grid

Task to be accomplished.
1) Check how many records we have checked.
2) On click of our custom button add records in collection using ajax call.
3) Decorate custom button

Okay, so now first we will get checked records from our interactive grid and loop through it and on click of a button we are going to add it into the collection using ajax call.


That will get us the selected(checked) records now here we are checking if the grid is editable if it is we are going in.Again we are checking if count of selected record(s) is more then 0 then we will process further else none records are selected no need for further process.

We will create a Ajax call to add records in collection first we make sure if collection exits or not if exits then truncate it if not then create it so we get accurate data.


Our collection name is "BUCKET" and added some member attributes(apex_collection)
(If we are using numbers then we can use p_n001 instead of p_c001)

Lets click on "attributes" of interactive grid of our page and scroll down till you find "Javascript Code" in properties and add below code.



Let's go muddy we are  adding custom action in our interactive grid tool bar with custom action name if you read carefully we have applied icon,texture,name.Then we are simply adding our ajax call to define action which will fire when we click on our custom button. Lastly we are showing success message when checked records are added into the collection.


On click of a button we are checking how many records checked then one by one we are passing it to to our ajax call (x01,x02) when it gets done show the success message.



Demo link
credentials : test/test

YouTube : https://youtu.be/BkQVrjXPj74


Show values in right side of shuttle

While working with select list and shuttle, when we want to display values into right side of shuttle depending upon selection from select ...