Group together every three grid rows

From pmusers
Jump to: navigation, search

This example shows how to highlight in light blue every third row in a grid. It also shows how to ensure that only one checkbox is marked in every three rows in the grid.


Dynaform: Group every 3 grid rows.json (right click and select Save Link As)
Author: Amos Batto <amos[at]processmaker.com>
Version: 1.0 (2019-07-19)
Tested in: PM 3.3.10 Community in Debian 9.5 with Firefox 60.5


Create the following Dynaform with a grid to list products and their quotes:

Group3RowsGrid InDesigner.png

This Dynaform contains the following fields:

  • A grid with the ID "orderList" that has the fields:
    • A textbox with the ID "product"
    • A textbox with the ID "quote"
    • A checkbox with the ID "confirmed"
  • A submit button

The "confirmed" checkbox must be marked in one of every three rows. JavaScript is executed when the Dynaform is submitted to verify that one and only one checkbox is marked in every three rows.

To implement this functionality, add the following JavaScript to the Dynaform:

var gridId = "orderList"; //set to grid ID
var checkColNo = 2; //column number of checkbox; counting starts from 0.

//function to set background color in every third grid row:
function setRowColors() {
  var oGrid = $("#"+gridId);
  var nRows = oGrid.getNumberRows();
  
  var oGridRows = oGrid.find("div.pmdynaform-grid-row");
  //set all rows to white background by default:
  oGridRows.css("background-color", "");
  
  for (var i = 1; i <= nRows; i++) {
    if (i % 3 == 1) {
      //subtract 1 because .eq() counts from 0
      oGridRows.eq(i-1).css("background-color", "#e9f7ef");  //light-blue
    }
  }   
}

//When the Dynaform loads, set the background color for the existing rows
setRowColors();

//When a new row is added, reset the backgound color
$("#"+gridId).onAddRow (function(oGrid, aRow, rowIndex) {
   setRowColors();
});

//when a row is deleted, reset the background color                       
$("#"+gridId).onDeleteRow (function(oGrid, aRow, rowIndex) {
   setRowColors();
});

function oneCheckedEvery3Rows() {
  var oGrid = $("#"+gridId);
  var aGridVals = oGrid.getValue();
  var len = aGridVals.length;
  
  //check if not three rows in last group of rows:
  if (len % 3 != 0) {
    alert("Please add more row(s) to the grid so three rows in last group");
    return false;
  }
  
  for (i = 0; i < len; i += 3) {
 
    //only one can be checked every three rows:
    var totalChecked = parseInt(aGridVals[i][checkColNo]) + parseInt(aGridVals[i+1][checkColNo]) + 
        parseInt(aGridVals[i+2][checkColNo]);
    var sRows = (i+1)+" - "+(i+3);
    
    if (totalChecked == 0) {
      alert("One checkbox must be marked in rows "+sRows+".");
      return false;
    }
    else if (totalChecked >= 2) {
      alert("Please only mark one checkbox in rows "+sRows+".");
      return false;
    }
  }
  return true;
}

getFormById( $("form").prop("id") ).setOnSubmit( oneCheckedEvery3Rows );


If the user doesn't add three rows for each row grouping, then an error message will be displayed when submitting the Dynaform:

Group3RowsGrid TooFewRows.png

If one checkbox is not marked every three rows, then an error message will be displayed when submitting the Dynaform:

Group3RowsGrid LacksCheck.png

A different message is displayed if more than one row is marked in a group of three rows:

Group3RowsGrid TooManyMarkedRows.png