I'm encountering an issue with my Interactive Grid (IG) in Oracle APEX, specifically when trying to filter columns that contain formatted HTML. In my grid, I display data as “Display only” (Format → HTML), which works perfectly - the grid cells display the content correctly. However, the problem arises when I attempt to filter the column.

When I click on the column header, a list of distinct values is generated for filtering. These values are shown as plain text with raw HTML tags, rather than rendering the HTML formatting as it appears in the grid cells. I would like to see the formatted HTML in the filter values, just like the cells in the grid.

Writing a custom query for the filter list didn't help because the return and display values are identical. Additionally, it doesn't find rows with HTML tags when I remove them using a regexp_replace in my SELECT statement that builds the filter list.

Has anyone faced a similar issue or could share some guidance or sample code to help implement a custom filtering interface that displays formatted HTML?

I'm encountering an issue with my Interactive Grid (IG) in Oracle APEX, specifically when trying to filter columns that contain formatted HTML. In my grid, I display data as “Display only” (Format → HTML), which works perfectly - the grid cells display the content correctly. However, the problem arises when I attempt to filter the column.

When I click on the column header, a list of distinct values is generated for filtering. These values are shown as plain text with raw HTML tags, rather than rendering the HTML formatting as it appears in the grid cells. I would like to see the formatted HTML in the filter values, just like the cells in the grid.

Writing a custom query for the filter list didn't help because the return and display values are identical. Additionally, it doesn't find rows with HTML tags when I remove them using a regexp_replace in my SELECT statement that builds the filter list.

Has anyone faced a similar issue or could share some guidance or sample code to help implement a custom filtering interface that displays formatted HTML?

• oracle-apex
• apex

Share Improve this question Follow edited Mar 21 at 11:09 Mark Rotteveel 110k229229 gold badges156156 silver badges224224 bronze badges asked Mar 21 at 9:27 MateuszDurakMateuszDurak 3177 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

What I used once to fix this issue:

I put this on execute when page load section of the page:

$("#your_ig_id").on("gridactivatecolumnheader", function (event, data) {
  setTimeout(function () {
    $("#your_ig_id_ig_column_header_menu_rows .a-IRR-sortWidget-row").html(
      $("#your_ig_id_ig_column_header_menu_rows .a-IRR-sortWidget-row").text(),
    );
  }, 500)
})

You can change timeout by your case, but the idea is to catch the click to the column header filter, and then setting the text to html by using JQuery.

I know this is not a perfect way to fix it, but it fixes it.

With the data containing HTML Markup there is no way to fix this AFAIK. The sorting is on the raw data - it will apply a sort on the values in the report and that is on the actual column value, not on what is visible using HTML markup.

There is a pattern in the IG that can be used to format data in the cells but allow sorting/filtering on the actual values and that is using the cellTemplate property in the column initialization.

Example: in an IG on EMP, render column JOB as bold.

Set Column > Advanced > Column Initialization JavaScript Function to:

function(config) {     
    config.defaultGridColumnOptions = {         
        cellTemplate: '<b>&JOB.</b>'   
    };     
    return config; 
} 

Not sure if that helps you though. Maybe you could extract the html tags from the data into 2 columns, one for opening tag and one for closing tag and then apply those in the cell template.