Programmatically setting values in the Interactive Grid

Recently I've been able to spend some quality time with the Interactive Grid(IG).  I've had two different requests from my users to programmatically set column values in the IG using a button. I decided to use my blog to help document the solution for future use.  Coincidentally, a user on the APEX forum asked for a combined solution from both of my user requests(which I'll demonstrate below).

 Here were the two methods requested:

1. Set the column value in all rows to the value of another column in the IG
2. Set the column value of selected rows using the value from a separate form

I'm still getting comfortable with the IG and it's capabilities, so luckily I was able to use a great resource created by Marko Goricki of APEXbyG on Github to cobble together solutions for both requests.

If you want to try it out, follow these step to create a demo IG:

1. Create an IG on the emp table of the sample database application provided with APEX
2. Set the Static ID property of your IG = emp
3. Click on the attributes link of the newly created IG and set Enabled = Yes in the Edit section of your IG
4. Right click on your IG and select Create button
5. Set the Action = Defined by Dynamic Action
6. Right click on your button and select Create Dynamic Action
7. Set the true action to Execute Javascript Code

And you're ready to go!  You can use the below code samples in the code property of your dynamic action to try out the solutions.

The key to both solutions is first to access the model by getting to the IG grid view:

1. var widget = apex.region('emp').widget();
2. var grid = widget.interactiveGrid('getViews','grid');
3. var model = grid.model;

'emp' being the static id of your IG

Once you have access to the model object you can get and set the value of a column in a record by using the getValue and setValue methods of the model object when you pass in the record to the methods.

1. Set the column value in all rows to the value of another column in the IG

This requirement entails looping through all rows of the IG to set the value of one column using the value of another.

Using the above to fetch the IG model object we're able to loop through the IG rows and set the value of the COMM column to the value of the SAL column :

1. var widget = apex.region('emp').widget();
2. var grid = widget.interactiveGrid('getViews','grid');
3. var model = grid.model;
4. 
   
5. model.forEach(function(r) {  
6.                 model.setValue(r,"COMM",model.getValue(r,"SAL"));  
7.         }  
8. );  

2. Set the column value of selected rows using the value from a separate form

The 2nd request was very similar to the 1st except you need to loop through only the selected rows.

1. var widget = apex.region('emp').widget();
2. var grid = widget.interactiveGrid('getViews','grid');
3. var model = grid.model;
4. var selRecs     = grid.view$.grid("getSelectedRecords");  
5.   
6. selRecs.forEach(function(r) {  
7.                 model.setValue(r,"COMM",model.getValue(r,"SAL"));  
8.         }  
9. ); 
10.  

Here I'm setting the value of one column using the value of another just like the previous example for consistency, but you could easily fetch the value from a UI field using the $v() function instead to fulfill the requirement.

I hope this helps others that are still getting to know the IG component like I am.

Cheers