Editable Interactive Report

It is known that current APEX versions lack the ability of editing Interactive reports. I want to compensate this by offering the below solution. Here is how you can create editable interactive report using APEX collection. You can modify this sample to work with tables instead of apex_collections. If you are using APEX 3.x, load jQuery library in page template header or page HTML header.

Create page process "On Load - After Header":

IF NOT APEX_COLLECTION.COLLECTION_EXISTS(p_collection_name => 'EMP')
THEN

APEX_COLLECTION.CREATE_COLLECTION_FROM_QUERY_B(
  p_collection_name => 'EMP',
  p_query => '
    SELECT empno,
      ename,
      mgr,
      sal,
      deptno,
      hiredate
    FROM emp
  '
);

END IF;

On Demand process SAVE_IR_VALUE:

BEGIN
  APEX_COLLECTION.UPDATE_MEMBER_ATTRIBUTE(
    p_collection_name => 'EMP',
    p_seq             => APEX_APPLICATION.G_x01,
    p_attr_number     => APEX_APPLICATION.G_x02,
    p_attr_value      => APEX_APPLICATION.G_x03
  );
  htp.prn('OK');
EXCEPTION WHEN OTHERS THEN
  htp.prn('NOK');
END;

Interactive report from query:

SELECT seq_id,
  c001,
  c002,
  c003,
  c004,
  c005,
  c006
FROM apex_collections
WHERE collection_name = 'EMP'

Page HTML header:

<style type="text/css">
 .ir-edit{text-decoration:none!important;color:#000!important}
 .edit-img{vertical-align:text-top}
 .whback{background-color:#FFF!important;font-weight:bold!important}
 .whback a{font-weight:bold}
</style>

<script type="text/javascript">

function changeValue(pThis,pSeqId,pColIdx,pValue,pSize,pMaxLength){

 if($(".apexir_WORKSHEET_DATA td input:not(:hidden)").length==0){

  var lSize=$nvl(pSize,20);
  var lMaxLength=$nvl(pMaxLength,30);
  var lCell=$(pThis).parent()
  var lField=$("<input/>",{"type":"text","id":"htmldbir_value_change","value":pValue,"size":lSize,"maxlength":lMaxLength});
  var lOk=$("<img/>",{"src":"#IMAGE_PREFIX#Fndokay1.gif","alt":"Save","height":"16","width":"16","css":{"vertical-align":"text-top"}});
  var lCancel=$("<img/>",{"src":"#IMAGE_PREFIX#FNDCANCE.gif","alt":"Cancel","height":"16","width":"16","css":{"vertical-align":"text-top"}});
  var lRow=$(pThis).parents("tr:eq(0)").children("td")
  var lOld=lCell.children().detach();

  lRow.addClass("whback");

  lOk.click(function(){
   $.ajax({
    url:"wwv_flow.show",
    dataType:"html",
    traditional:true,
    cache:false,
    type:"POST",
    data:{
     p_flow_id:$v("pFlowId"),
     p_flow_step_id:$v("pFlowStepId"),
     p_instance:$v("pInstance"),
     p_request:'APPLICATION_PROCESS=SAVE_IR_VALUE',
     x01:pSeqId,
     x02:pColIdx,
     x03:$v("htmldbir_value_change")
    },
    success:function(d){
     if(d=='NOK'){
      raiseError();
     }else{
      gReport.pull();
     }
    }
   });
  });

  lCancel.click(function(){
   lCell.empty().append(lOld);
   lRow.removeClass("whback");
   $(".edit-img").show();
  });

  $(".edit-img").hide();  
  lCell.append(lField,lOk,lCancel);
 }

 function raiseError(p){
  var lErr=$nvl(p,"Can not save value.");
  $("#htmldbir_value_change").addClass('ui-state-error ui-corner-all fielddatabold');
  alert(lErr);
 }
}

</script>

Go edit report Column Definition. For the columns you like to edit place this Link Text:

#C002#&nbsp;<img class="edit-img" alt="" src="#IMAGE_PREFIX#ed-item.gif" />

Replace #C002# accordingly to the column substitution string.

Link Attributes:

class="ir-edit" onclick="changeValue(this,#SEQ_ID#,2,'#C002#',10,10)"

Replace third attribute according to APEX collection attribute number and #C002# accordingly column substitution string.

Change Target to "URL". And place to URL:

javascript:void(0)

Download sample application

You can check the working sample on apex.oracle.com