Skip to content

Select All / Unselect All Checkbox in Interactive Report Header

November 15, 2012
I want a checkbox in an Interactive Report (IR), and I want the users to be able to quickly Select All or Unselect All of them. I don’t want two big clunky buttons to do this, I just want a single checkbox in the header like I see on cool peoples’ web sites.
To do this:
1. In the Region Definition for the IR, add the checkbox to the query, e.g.:
SELECT ...,
       apex_item.checkbox(1, record_id) selected
FROM   ...
2. In the Report Attributes for the IR, modify the attributes of column “SELECTED”:
Heading = <input type="checkbox" id="selectunselectall">
Display Text As = Standard Report Column
Allow Users To = (uncheck all options, including Hide, Sort, etc.)
3. In the page definition, add a Dynamic Action:
Event = Change
Selection Type = jQuery Selector
jQuery Selector = #selectunselectall
Condition = - No Condition -
True Action = Execute JavaScript Code
Fire On Page Load = (uncheck)
Code =
if ( $( '#selectunselectall' ).is(':checked') ) {
  $('input[type=checkbox][name=f01]').attr('checked',true);
}
else {
  $('input[type=checkbox][name=f01]').attr('checked',false);
}

The only issue with this is if the user clicks “Action” and “Select Columns”, the checkbox item shows the html code (“<input type=”checkbox”…”) instead of a nice name. I think I’ll be able to get away with this.

About these ads

From → APEX

15 Comments
  1. Reblogged this on Sutoprise Avenue, A SutoCom Source and commented:
    Add your thoughts here… (optional)

  2. Nikhil permalink

    Jeff, Thanks for nicely documented select all functionality.

    I am seeing a issue when I try to filter records and then select all the filtered records. In that cases the select / unselect all is not working.

    Any Tips ?

    • I’d try it in a few different browsers – see if the problem occurs only in IE or Chrome or Firefox. You haven’t described what you mean by “not working” so I can’t help much more than that. If you still have problems I recommend raising a question on StackOverflow – http://www.stackoverflow.com

      • MalcA permalink

        Jeffrey – I saw the same effect as Nikhil: It works, but after you apply a filter, clicking on the select/deselect all checkbox did not fire the Dynamic Action (I saw this on the Firebug console tab with the app in debug mode). When I refreshed the screen, the filter was still there and the select/deselect checkbox then did toggle all.
        I tried a few things but could not find the reason for this issue. The alternatives are to put a separate checkbox in the region to fire the DA (not a great option because the checkbox position is too far from the report), or buttons on screen to select/deselect all. I couldn’t get it to work with the select/deselect checkbox as the column header, which is obviously the best option.

      • Thanks MalcA.

        I’ve tried it in Firefox 30.0 on Win8, and wasn’t able to reproduce the issue, unfortunately. When I apply a filter to my IR, the checkbox still works as expected.

        (as an aside, the only issue I’ve had since writing this blog article, however, is that I find it doesn’t work properly if I’ve applied a Control Break to an IR.)

      • MalcA permalink

        Thanks to John Ng below. I just needed to set the DA’s Event Scope to Dynamic, so it continues to work when applying filters (or paginating). It works a treat now, and I’m using on Change of jQuery Selector.

      • MalcA permalink

        … and APEX 4.2.0.00.27

  3. Ghislain permalink

    Jeffrey,
    I am having a problem with checkbox. our database has alot of data over a million. for some error type column we my have 7000 rows and when a user would like to relieve the errors when selecting the checkbox and click the error relieve button, some rows will not be selected I believe because the user must click next to get to the next page to select other rows and this is not possible because APEX will continue processing the data and the reports will stuck. I am looking for a way to change the pagination from 15 to 100 and apex doesn’t allow me to do so. aCTUALLY i CAN’T FIND THE PAGINATION ON THE REPORT, WOULD YOU LET ME KNOW WHERE i CAN FIND THE PAGINATION LINK/ICON?

    • Hi Ghislain,

      The page size for an Interactive Report is set up by the end user – but you can change the default no. records per page by running the report as a developer, change the No. of rows displayed, then save the report as Default.

      However, I suggest you consider an alternative strategy. The checkbox and “check all/uncheck all” options are intended for users who wish to select a small set of records at a time – in other words, the user is viewing records on the screen, reviewing them all, and deciding to select them all anyway.

      If your users are routinely working with 1000’s of rows at a time, I would not use this checkbox strategy. After all, I would be very surprised if your users are actually reviewing each of those 7000 rows before clicking the “error relieve” button – I would bet they only give a cursory glance across them first. A better approach would be to consider some kind of search filter combined with the error relieve button – i.e. “process all records older than 1 day” or “process all records within this range of IDs”.

      In other words, don’t force your users to wrestle with pages of checkboxes when all they want to do is effectively “process all”.

      Hope this helps.

      • Ghislain permalink

        I agree. I am working on changing the checkbox in the next release. I didn’t build the application, I just own it and I am learning APEX and this is my first time to wor on APEX. At least for now while I am thinking of a better implementation, which I have an idea how to solve this problem. I was looking at least to print 100 roows per page. I did this in a different application (DMA), where I run the report, I use the Action button and change the rows to 100 and save the report as a primary report. But when I try to use the same strategy to this application (ADC) that has a problem, I am not able to do so because the APEX is running the process and this process will freez and take forever. That is where I stuck. If I can change the rows to print at leat 100 rows on the screen, I will help the user significantly in their process of relieving error(s). Thak you for your insight and if you come up with any solution that might help, please don’t hesitate to communcate with me. Thank you.

  4. anthy permalink

    It’s very useful. Thank you very much!!:)

  5. John Ng permalink

    Simple and useful. Thanks. I am using Application Express 4.2.4.00.08 and certain changes may be needed:
    1. Event Scope should be set to “Dynamic” otherwise you loose the Dynamic action when you click at the repagination to move to different sections of the table
    2. You might have to use a Selection Type of “DOM Objects” instead of “jQuery selector” with DOM Object set as “selectunselectall’

  6. Q_DUDE permalink

    Hi Jeffrey,

    First of all thanks alot for this great idea .

    I have a similar scenario but few modification,
    1. I wanted a Form like structure on a table.

    create table EMP1
    (
    id int,
    name varchar2(20),
    value number(2,2)
    )

    Here I wanted user to modify the “Value” column to any value between 0 to 100 (including decimals).
    and I want a Checkbox or any toggle button which when clicked should modify the “value” column to “-1″. -1 means disabled. In this case user cannot add any value in in “value” text field.

    I tried with your Checkbox way but I am being limited with not able to modify the value field.

    Can you please assist me with this ?
    It would be of great help.

    Thanks,
    QD

    • The idea of the checkbox in my example here is to drive some code that will run on the database when the user submits the page. In your case I guess you’d have some code which checks to see if the checkbox was ticked, and do an update on your table to set value to -1? But, this won’t happen until the page is submitted. If you want the checkbox to dynamically disable the “value” text field, you’ll need to add some javascript. You may be able to get some clues about how to do this here: http://stackoverflow.com/questions/6358673/javascript-checkbox-onchange

      • Q_Dude permalink

        Thanks alit Jeffrey.
        I eill check it and let you know. Thanks again for quick reply

        QD

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 195 other followers

%d bloggers like this: