Check before deleting a grid row

From pmusers
Jump to: navigation, search

This example shows how to use JavaScript to check whether a grid row is allowed to be deleting before deleting it. It uses jQuery's .off("event") function to removes the default "click" event handler for the "Delete" buttons in grids, and uses grid.deleteRow() to delete the grid row if it meets a certain condition.


Dynaform: Check before deleting grid row.json (right click and select Save Link As)
Author: Amos Batto <amos[at]processmaker.com>
Version: 1.0 (2019-07-18)
Tested In: PM 3.3.10 Community in Debian 9.5 with Firefox 60.5


Create the following grid which contains a list of clients.

CheckDeleteRow FormInDesigner.png

This Dynaform contains the following fields:

  • A grid with the ID "clientsList" which contains:
    • A text field with the ID "firstName",
    • A text field with the ID "lastName",
    • A checkbox with the ID "hasContract",
  • A submit button

When the "hasContract" checkbox is marked in a grid row, then that client can't be deleted. When the user clicks on the "Delete" button for a particular row, JavaScript checks if the client has a contract and displays a message to inform the user that the row can't be deleted from the grid.

For example, a user fills in the form:

CheckDeleteGridRow FilledForm.png

Then, clicks on the "Delete" button in the second row, and is shown the following message:

CheckDeleteGridRow AlertHasContract.png

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

var gridId = "clientsList"; //set to ID of grid
var checkboxColNo = 3; //set to the column number of the "hasContract" checkbox. Counting starts from 1. 

function checkIfDeleteRow(e) {                                                       
  var rowNo = $(this).attr("data-row");
  var checkVal = $("#"+gridId).getValue(rowNo, checkboxColNo);
  
  if (checkVal == '"1"' || checkVal == "1") {
    alert("The client in row "+rowNo+" can be deleted because has a contract.");
  }
  else {
    $("#"+gridId).deleteRow(rowNo);
  }
}

//turn off the click event handler for "Delete" button in all existing grid rows when Dynaform loads
$("#"+gridId).find("button.glyphicon-trash").off("click");

//add custom click event handler for delete buttons in grid when Dynaform loads:
$("#"+gridId).find("button.glyphicon-trash").click(checkIfDeleteRow);

//add custom click event handler to new grid row when added:
$("#"+gridId).onAddRow( function(aNewRow, oGrid, rowIndex) {
  //subtract because eq() starts counting from 0, not 1 like rowIndex:
  $("#"+gridId).find("button.glyphicon-trash").eq(rowIndex-1).off("click");
  $("#"+gridId).find("button.glyphicon-trash").eq(rowIndex-1).click(checkIfDeleteRow);
});