Thursday, October 11, 2012

Grouping visually in Interactive Report using jQuery

There will be sometimes a need arises to group the Interactive Report using the background color to visual identify the group of records.



So using jQuery in Interactive Report is one of the simplest solution.

Step 1: Create a Interactive Report
Step 2: Identify the Group Column
Step 3. Write a Dynamic Action which fires on refresh of the Interactive Report region. The Following code will do the job

var gcolor = '#dddddd';
var gprev_city = '';
var gcity ;

$("table.apexir_WORKSHEET_DATA > tbody > tr > td[headers='CITY']").each(function(){
    gcity = $(this).text();
        if (gprev_city != gcity) {
    if (gcolor == '#dddddd' )
        gcolor = '#6092D0';
    else
        gcolor = '#dddddd';
        gprev_city = gcity ;
    }
    $(this).parent().children().each(function(){
         $(this).css('background-color',gcolor);
    });
});


The Sample Application to demonstrate this feature is at http://apex.oracle.com/pls/apex/f?p=12278:2