A c:CheckAllOrNone for custom pages

The default UI allows a “Display Checkboxes (for Multi-Record Selection)” option to be specified that results in a checkbox per table row plus a “Toggle All Rows” checkbox in the column heading. The custom component below provides this “Toggle All Rows” facility for custom UI. Here is an example of it in use:

(The per-row checkbox is usually implemented by wrapping the SObjects in a class that provides a “selected” boolean; pity the platform doesn’t provide a standard mechanism for this as the wrappers add a lot of noise to the controller.)

To use the component add it to the header facet of the table column that contains the checkboxes:

<apex:column>
    <apex:facet name="header">
        <c:CheckAllOrNone/>
    </apex:facet>
    <apex:inputCheckbox value="{!row.Selected}" title="Select"/>
</apex:column>

Here is the definition of the component. It makes assumptions about the structure of the generated HTML to avoid the need for explicit id values to be be specified:

<apex:component>
<script type="text/javascript">
function cvCheckAllOrNone(allOrNoneCheckbox) {

    // Find parent table
    var container = allOrNoneCheckbox;
    while (container.tagName != "TABLE") {
        container = container.parentNode;
    }

    // Switch all checkboxes
    var inputs = container.getElementsByTagName("input");
    var checked = allOrNoneCheckbox.checked;
    for (var i = 0; i < inputs.length; i++) {
        var input = inputs.item(i);
        if (input.type == "checkbox") {
            if (input != allOrNoneCheckbox) {
                input.checked = checked;
            }
        }
    }
}
</script>
<apex:inputCheckbox onclick="cvCheckAllOrNone(this)" title="Toggle All Rows"/>
</apex:component>
Advertisements

One thought on “A c:CheckAllOrNone for custom pages

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