Pages

Sunday, April 15, 2018

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. model.forEach(function(r) {  
  5.                 model.setValue(r,"COMM",model.getValue(r,"SAL"));  
  6.         }  
  7. );  

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


9 comments:

  1. Amazing article! I'm enjoying more and more learning about how to manipulate these new grids.

    ReplyDelete
  2. How do you set value in IG column, from the Item from a different region.

    for example: the header of an invoice, where Dispatched flag is set to Yes, then I wanted to set dynamic action to all the Invoice line level invoice (in IG) to "dispatched Date" to sysdate.

    ReplyDelete
  3. I get undefined in the variables when I try to use the firt solution. What could be the possible reasons? Is the code supposed to be in the Function and Global Variable Declaration or somewhere else?
    function update_grid () {
    var widget = apex.region('nic').widget();
    var grid = widget.interactiveGrid('getViews','grid');
    var model = grid.model;
    model.forEach(function(r) {
    model.setValue(r,"C4",model.getValue(r,"C1"));
    console.log('C4 is'+ model.getValue(r,"C4"));
    console.log('C1 is'+ model.getValue(r,"C1"));
    }
    );

    }

    ReplyDelete
  4. I got this resolved when the C1 , C2 etc which was static id of the column was replaced with column names such as NAME, NOUN etc..

    ReplyDelete
  5. hi,

    is there anyway to get IG column value from page item?

    Thanks,

    ReplyDelete
    Replies
    1. Yes.
      Instead of
      model.setValue(r,"COMM",model.getValue(r,"SAL"));

      you can use model.setValue(r,"COMM",apex.item("PX_NAME").getValue());

      Delete
  6. I guess I am the only one who came here to share my very own experience. Guess what!? I am using my laptop for almost the past 2 years, but I had no idea of solving some basic issues.
    free4crack.net
    Grids for Instagram Crack

    ReplyDelete
  7. Goood Working...Thanks for shairng keep it up!
    Grids for Instagram Crack

    ReplyDelete