Skip to Main Content

Info

Copying text from an Interactive Grid (IG) that has editing disabled, or from "display only" columns in an IG that does have editing enabled, is not straightforward.

In the case of an Interactive Grid (IG) that has editing disabled, the user has to use F8 to switch between cell and row selections, which is not intuitive at all. More info here.
In the case of "display only" columns in an IG that does have editing enabled, copying is simply not possible.

The best solution I have found is explained here:
"According to document Doc ID 2555046.1 it is not possible to copy the text of a display only column in a Interactive Grid (IG) when it is in EDIT mode. The document states that it is expected behavior."
"The only workaround we have at the moment is to change the display-only column to a text field column and add a custom class APP-readonly in the Appearance CSS Classes attribute and the Advanced CSS Classes attribute. This class will add the readonly="readonly" attribute to the element on loading the page and uses some CSS (background) to make the column look like a display only column."

That post doesn't explain exactly what to do, and it is not complete, so I created this page to show how to actually do this.

The idea is to set Attributes -> Editing to Enabled, and then to change all columns to Text Fields, and add the CSS class "APP-readonly" to these columns (both under Appearance and Advanced).
Note that in case of read-only IG, you need to set Attributes -> Allowed Operations to (at least) Update Row, otherwise this will not work - and you also want to disable the Save Button under Attributes -> Toolbar -> Controls, and set both APEX$ROW_SELECTOR and APEX$ROW_ACTION to Server-side Condition = Never.
The first Dynamic Action then runs on Page Load, and adds attribute "readonly" to all columns that have CSS class "APP-readonly".
The second and third Dynamic Actions get triggered by a Mode Change (i.e. Edit on or off) and any selection change in the IG, respectively. These DA's then call a Javascript function.
The Javascript function determines the Region ID (of the IG) and the "edit mode", and changes the colors for all columns that have the CSS class "APP-readonly".

Note 1: I made the Javascript function more complex than needed, to show the option for custom colors (IG-3 vs. IG-4). You can choose one or the other and remove the if statement.
Note 2: I put all my code on this page itself - if you plan to use this on more than 1 page, you will probably want to move the DA's to page 0 and the javascript to an external file.
Note 3: This code has been tested on Apex versions 20.2 and 22.2, and it took quite some fiddling to get that to work properly. And because it relies on Apex Javascript and CSS, which evolves over time, it will most likely break at some point in the future. One of the reasons I'm not a big Javascript fan.
Note 4: I'm sure all this can be improved upon, e.g. by using "inherit" for certain CSS changes and implementing things like :hover, but this has already taken way too much time...

IR

DeptnoDnameLoc
10ACCOUNTINGNEW YORK
20RESEARCHDALLAS
30SALESCHICAGO
40OPERATIONSBOSTON
  • 1 - 4
Selecting text and/or copying is possible, but editing is not possible (obviously).

IG-1 - edit disabled

Attributes -> Edit -> Enabled = No
Selecting text from a cell and/or copying is not possible, except when using F8.

IG-2 - edit enabled with Display Only columns

Attributes -> Edit -> Enabled = Yes
Selecting text and/or copying is not possible.

IG-3 - edit enabled FIXED

Attributes -> Edit -> Enabled = Yes
Columns -> Appearance + Advanced -> CSS Classes -> APP-readonly
Selecting text and/or copying is possible, but editing is not possible.

IG-4 - edit enabled FIXED with custom colors

Same definition as IG-3.
The dynamic action applies custom colors to this IG.

Code

Page

Identification
Page ID
Name
Javascript
Function and Global Variable Declaration

Region

Identification
Sequence
Title
Type
Source
Source Type
Table Name

Dynamic Action

Identification
Name
Execution Options
Sequence
When
Event
Advanced
Event Scope
True Action
Identification
Action
Settings
Code
Execution Options
Sequence
Fire On Initialization

Dynamic Action

Identification
Name
Execution Options
Sequence
When
Event
Selection Type
jQuery Selector(s)
Advanced
Event Scope
True Action
Identification
Action
Settings
Code
Execution Options
Sequence
Fire On Initialization

Dynamic Action

Identification
Name
Execution Options
Sequence
When
Event
Selection Type
jQuery Selector(s)
Advanced
Event Scope
True Action
Identification
Action
Settings
Code
Execution Options
Sequence
Fire On Initialization