How to Create a Select/Un-select All Checkbox for a Column Checkbox in a Grid

How Can We Help?

< Back

Scenario

There are instances when a select/un-select all needs to be added to a checkbox column in a grid on a form.

 

Solution

The above can be achieved by adding HTML code in the control caption.

Default HTML code caption:

{Column Caption}<br/><input id='{Unique ID of select all checkbox}' type='checkbox' onclick="$('input#{Control Name}').
each(function(){$(this).prop('checked',$('input#{Unique ID of select all checkbox}').prop('checked'));})" />

Sample HTML code in Control Caption:

Delete<br/><input id='deleteall' type='checkbox'onclick="$('input#PC30200Delete').
each(function(){$(this).prop('checked',$('input#deleteall').prop('checked'));})"/>

Please note that this method only works from XMPro 6.5 onwards

Please find below example for guidance:

  1. Log on to XMDesigner with Administrative rights account.
  2. Double click on Process Group from Process Explorer
  3. Create a Process Group by dragging an activity icon from Toolbox to the middle panel.
  4. Modify the Process Group name and description from the Properties panel.
  5. Press Ctrl + S on the keyboard to save the changes then double click on the newly created process group.
  6. Modify the Process name and description from the Properties panel.
  7. Press Ctrl + S on the keyboard to save the changes then double click on the newly created process
  8. Create an Activity by dragging an activity icon from Toolbox to the middle panel
  9. Modify the Name and the static Activity Description of the activity from the Activity Configuration Wizard.
  10. Press Ctrl + S on the keyboard to Save the changes.
  11. Click on the newly created Activity and go to the Properties panel.
  12. Click on the ellipsis button next to the Event Create option.
  13. Change the Creation Type to “First Activity” and Creation Value to “All Employees”.
  14. Press Ctrl + S on the keyboard to save the changes.
  15. Click on the ellipsis button next to the Object Group option.
  16. Click on the “Add” button in Maintain Object Groups window, to create a new object group.
  17. Click on the newly created Object Group and modify the name and Description
  18. Change the Grid option to “True”.
  19. Click OK to save the changes.
  20. Double click on the Activity to open Activity Designer.
  21. Drag and Drop a new checkbox control from the Toolbox panel to Activity Designer.
  22. Modify name and caption to the below format from Object Configuration Wizard.
    
    Name: TP1050Select
    Caption: Select <br/> <input id='cbxSelect' type='checkbox' onclick="$('input[id*=TP1050Select]').each(function(){$(this).prop('checked',$('input#cbxSelect').prop('checked'));})" />
  23. Select the Object Group created earlier.
  24. Click “OK” to confirm the changes.
  25. Press Ctrl + S on the keyboard to Save the changes.

 

 

 

Comments are closed.

This is the legacy version of the XMPro Documentation site. For the latest XMPro documentation, please visit documentation.xmpro.com

X