Enable/Disable Editable Interactive Report Column Based on Another Column in Oracle APEX 5.0

Enable/Disable Editable Interactive Report Column Based on Another Column in Oracle APEX 5.0

Preview

In this tutorial, you will learn Enable/Disable Interactive Report Column Based on Another Column in Oracle APEX. I’ve seen in interactive grid it is possible using dynamic action. If I want to use dynamic action on interactive report then there is no option to perform direct dynamic action on column.

  • To demonstrate this example, I am using the following EMP table for the interactive Report .Go to column attribute in the Property Editor and define ‘Escape special characters’ is OFF.. You can create it in your schema to test this example:
CREATE TABLE  "EMP"
   ( "EMPNO" NUMBER(4,0) NOT NULL ENABLE,
	 "ENAME" VARCHAR2(10),
	 "JOB" VARCHAR2(9),
	 "MGR" NUMBER(4,0),
	 "HIREDATE" DATE,
	 "SAL" NUMBER(7,2),
	 "COMM" NUMBER(7,2),
	 "DEPTNO" NUMBER(2,0)
   )
/
  • Create an Interactive Report based on the following query:
select EMPNO,
        APEX_ITEM.SELECT_LIST(
        p_idx           =>   2,
        p_value         =>   'Y',
        p_list_values   =>   'Yes;Y,No;N',
        p_attributes    =>   'style="color:red; width:90px"',
        p_show_null     =>   'NO',
        p_null_value    =>   NULL,
       -- p_null_text     =>   '-Select-',
        p_item_id       =>   'f02_'||EMPNO||'',
        p_item_label    =>   'Label for f02_'||EMPNO||'',
        p_show_extra    =>   'NO') "TYPE_SELECT",
       APEX_ITEM.TEXT(
       	        p_idx      =>  3,
       	        p_value    =>  ENAME,
       	        p_item_id  =>  'f03_'||EMPNO||'')ENAME,
       APEX_ITEM.TEXT(
       			p_idx     =>  4,
       			p_value   =>  JOB,
       			p_item_id =>  'f04_'||EMPNO||'')JOB,     
       MGR,
       HIREDATE,
       SAL,
       COMM,
       DEPTNO
  from EMP
  ORDER BY ROWNUM
  • Create dynamic action onchange event on interactive report column. Preview
     * Eevent          : Change;
     * Selection Type  : JQuery Selector;
     * JQuery Selector : select[name="f02"];
  • Inside the onchange dynamic action you will execute following javaScript Code and specify the action fires on initialization off : Preview
var lov = this.triggeringElement.value;
var lov_id = this.triggeringElement.id;
var row = lov_id.substr(lov_id.length - 4);
var count = (row.length);
//alert(row);
if (lov == "N") {
    //  $( "#f02_" + row ).prop( 'readOnly', false);
    $x_disableItem("f04_" + row, true);
    $x_disableItem("f03_" + row, true);
} else {
    //   $( "#f02_" + row ).prop( 'readOnly', true);
    $x_disableItem("f04_" + row, false);
    $x_disableItem("f03_" + row, false);
}

Demo

You might like:


comments powered by Disqus