Check All Checkboxes in Grid Rows

Intro:

This example demonstrates how to use JavaScript to check a checkbox widget inside each row of a grid. In this example, we have a standard load-all grid (populated by an RPG program) with a Select column. Each row contains a checkbox widget in the Select column that can be selected. The JavaScript code that this example uses will automatically check the checkbox of all rows, to act as a ‘Select All’ option.

The RPG program that runs this example is very simple and only provides logic to display the correct record format and populate the grid with data. The logic for looping through the grid and checking each checkbox is set up in the DSPF.

Building the Example:

This example assumes that you are familiar with setting up a load-all style grid. If you are not familiar with load-all grids, we recommend reading the following section before trying this example: https://profoundlogicsupport.atlassian.net/l/cp/E20008uS.

To start, we put together a screen that looks like this:

This is a very simple screen that uses a panel, grid widget, output fields, buttons and checkbox widgets from the Blueprint widget set. Now that we have our screen set up to look how we’re wanting, we can configure the Select All button to check all checkboxes in the grid.

Configuring the Checkboxes:

Give the checkbox widget a unique ID like chkBox
Set the checked value property to Y
Set the unchecked value property to N
1. NOTE: We are using Y and N for the checked/unchecked values in this example. You can use anything for these properties, such as:
  1. 1 / 0
  2. True / False
  3. Yes / No
  4. Etc.
Bind the value property to a field as shown below:
1. Field Name: selected
2. Data Type: Character
3. Length: 1

The value property should be bound to a field that matches the type of value that you used for checked value and unchecked value. Since we are using a character field with a length of 1 for these properties, that’s how we’ve setup the bound field.

Setting up the Select All Button:

Place a Select All button on the screen
1. The specific button that you choose for this does not matter
2. In our example, we’ve placed the button widget on the grid header but this can be placed anywhere on the screen
Place a Deselect All button on the screen
1. In addition to a Select All option, this example will also demonstrate functionality to deselect all checkboxes

Our Select column looks like the following after adding these buttons:

JavaScript:

This portion of the example is where we’ll configure the Select All button to check all of the checkboxes in the grid. In this example, we want the checkbox to be checked after clicking the button widget. So, the JavaScript code used for this will be placed in the onclick event.

Place the following code in the onclick event of the Select All button:
var myGrid = getObj("Grid1"); for (var y=0; y<=myGrid.grid.getRecordCount(); y++) { //loop through the records in the grid if (!myGrid.grid.isRowFilteredOut(y)) { // check if this row has been filtered out myGrid.grid.setDataValue(y, "selected", "Y"); //this will check the checkbox inside of the subfile } }
1. This code does the following:
  1. References the grid widget by using getObj()
  2. Loops through all of the grid records
  3. Checks to see if a row has been filtered out
  4. Sets the value of the checkbox for each available row to Y (the checked value)
Place the following code in the onclick event of the Deselect All button:
var myGrid = getObj("Grid1"); for (var y=0; y<=myGrid.grid.getRecordCount(); y++) { //loop through the records in the grid if (!myGrid.grid.isRowFilteredOut(y)) { // check if this row has been filtered out myGrid.grid.setDataValue(y, "selected", "N"); //this will check the checkbox inside of the subfile } }
1. This code does the following:
  1. References the grid widget by using getObj()
  2. Loops through all of the grid records
  3. Checks to see if a row has been filtered out
  4. Sets the value of the checkbox for each available row to N (the unchecked value)

End Result:

After setting up your screen and coding the JavaScript for these buttons, you should see that your Select All button will check the checkbox in each row of the grid and the Deselect All button will uncheck every checkbox in each row of the grid. Below is a short video demonstration: