Cascade Select List in Tabular form

Hey guys ,

Once i was suffering in manual tabular forms, there i was having a requirement of cascade Select list.And obviously this is necessary if user select a value then another column should be populated based on value.

Steps: Create a Interactive or Classic report as per your requirement using APEX_ITEM API .

Eg.

SELECT
APEX_ITEM.SELECT_LIST_FROM_LOV(2,deptno,'DEPT',
                              p_attributes      =>    '  style="width:20vw"
                                                 onchange ="populate_emp(this.value,'||lpad(empno,4,4)||')"
                                                 onfocus ="populate_emp(this.value,'||lpad(empno,4,4)||'))
                              dept,
apex_item.select_list
            (3,
             empno,
            p_item_id=> lpad(empno,4,4)) empno           
FROM emp;

JavaScript Function in “Function and Global Variable Declaration”

function populate_emp (pVal,next) {
 var id='#'+next;
 apex.server.process(
  "POPULATE_EMP_LOV", {
  x01 : pVal
                }, {
  dataType : 'text',
  success : function (pData) {

            $(id).html(pData);
  }
 });
}

Application Process :

DECLARE
   l_counter   NUMBER := 0;
   l_dept_id   NUMBER;

   CURSOR emp_list
   IS
      SELECT empno || ' - ' || ename d,
             empno r
      FROM   emp
      WHERE  deptno=apex_application.g_x01;

BEGIN
   OWA_UTIL.mime_header ('text/xml',
                         FALSE
                        );
   HTP.p ('Cache-Control: no-cache');
   HTP.p ('Pragma: no-cache');
   OWA_UTIL.http_header_close;
   HTP.prn ('<select>');

FOR c_cnt IN emp_list
      LOOP
         IF l_counter = 0
         THEN
            HTP.prn (   '<option value="'
                     || ''
                     || '">'
                     || 'Select</option>');
       END IF;

         HTP.prn ('<option value="' || c_cnt.r || '">' || c_cnt.d
                  || '</option>');
         l_counter := l_counter + 1;
      END LOOP;
   IF l_counter = 0
   THEN
      HTP.prn ('<option value="' || '' || '">' || '-- Select --'
               || '</option>');
   END IF;
   HTP.prn ('</select>');
END;

Your cascade select list is ready : Output:


comments powered by Disqus