Interactive Grid - Add row from another report using JavaScript

There was a requirement to build a page where users can search for data in a report and then choose a row to be added to Interactive Grid (IG), besides regular way of adding rows to IG. There are two approaches (could be more) to achieve this. Old school approach is adding a row to APEX Collections when user chooses a row in report and using same collection in IG query. Other approach could be, doing something with JavaScript (JS) and build solution on top of IG framework using IG JS APIs, without using collections.

When we convert this requirement into technical specification, essentially it has two parts.

1. Adding new row to IG via JS
2. Set values for newly added row via JS

Luckily, there are JS APIs and functions already available to achieve both the points.

Adding new row to IG via JS

Adding new empty row via JS is rather straight forward and easy.

    // "order" is IG region static ID
    var $widget = apex.region('order').widget();
    var $grid = $widget.interactiveGrid('getViews', 'grid');
    var $model = $grid.model;

    //insert new record on a model
    var newRecordId = $model.insertNewRecord();

In above code order is IG region static ID. 

Set values for newly added row via JS

Once row is added you can add values into IG columns using below code

    //continuation of above code
    //get the new record
    var $newRecord = $model.getRecord(newRecordId);

    // PRODUCT_ID and ORDER_QUANTITY are column names in IG SQL query
    //update record values
    $model.setValue($newRecord, 'PRODUCT_ID', pProductId);
    //set default quantity to 1
    $model.setValue($newRecord, 'ORDER_QUANTITY', '1');

That's it. 

Here is the link to working example. In this example, there is a Interactive Report (IR) region "Search & Select" and "Product Name" column has a link which calls JS function "addToOrder" with product_id passed as input parameter. Another IG region "Your Order".

JS function code

  function addToOrder(pProductId) {
    // "order" is IG region static ID
    var $widget = apex.region('order').widget();
    var $grid = $widget.interactiveGrid('getViews', 'grid');
    var $model = $grid.model;

    //insert new record on a model
    var newRecordId = $model.insertNewRecord();
    
    //get the new record
    var $newRecord = $model.getRecord(newRecordId);

    // PRODUCT_ID and ORDER_QUANTITY are column names in IG SQL query
    //update record values
    $model.setValue($newRecord, 'PRODUCT_ID', pProductId);
    //set default quantity to 1
    $model.setValue($newRecord, 'ORDER_QUANTITY', '1');    
  }  

Tested with APEX Versions: 18.1,18.2 and 19.1

Thank you.