Enable or disable fields in grid

From pmusers
Jump to: navigation, search

Fields inside a grid can be enabled or disabled by setting their disabled property to false or true. This programming example shows how to enable or disable fields in a grid depending on the value that is changed in another field in the same grid row.



DynaForm: Enable or disable fields in grid.json (right click and select Save link as)
Author: Amos Batto (amos@processmaker.com)
Version: 1.0 (2018-10-31)
Tested in: ProcessMaker 3.2.3 Community in Debian 9.5 with Firefox 52


Create the following Dynaform containing a grid with the ID "equipmentList":

EnableDisableFieldsInGrid-formInDesigner.png

The grid has the following fields:

  • Text field with the ID "item",
  • Dropdown with the ID "hasDiscount" with the following options:
    • Key: "No Discount", Label: "No Discount",
    • Key: "Discount", Label: "Discount"
  • Text field with the ID "normalRate",
  • Text field with the ID "discountRate"

When the user adds a new row to the grid, the "hasDiscount" dropdown is set to "No Discount" by default and the "discountRate" textbox is disabled. When the user selects the "Discount" option in the "hasDiscount" dropdown, the "discountRate" textbox is enabled in the same row in the grid. If the "No Discount" option is selected, then the "discountRate" textbox is disabled and any existing value in the field is deleted.

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

//when the Dynaform loads, pass through the grid and disable or enable the discountRate field 
//in each row, depending on the value of the hasDiscount field.
var nRows = $("#equipmentList").getNumberRows(); 

for (i = 1; i <= nRows; i++) {
  var hasDiscount = $("form\\[equipmentList\\]\\["+i+"\\]\\[hasDiscount\\]").val();
  
  if (hasDiscount == "Discount") {
    $("#form\\[equipmentList\\]\\["+i+"\\]\\[discountRate\\]").prop("disabled", false);
  }  
  else {   // if "No Discount":
    $("#form\\[equipmentList\\]\\["+i+"\\]\\[discountRate\\]").prop("disabled", true);
  }
}

//when a new row is added to the grid, disable the discountRate field by default.
$("#equipmentList").onAddRow( function(aNewRow, oGrid, rowIndex) {
  $("#form\\[equipmentList\\]\\["+rowIndex+"\\]\\[discountRate\\]").prop("disabled", true);
});
                                                        
var formId = $("form").prop("id");
  
//Set an onchange event handler for the form. When the value of a field changes in the Dynaform, 
//check whether the changed field is the hasDiscount field in the grid. 
//If so, then if hasDiscount is set to "Discount", then enable the discountRate field in the same row. 
//If set to "No Discount", then disable the discountRate field.
$( "#" + formId ).setOnchange( function(fieldId, newVal, oldVal) {
  //check if a field changed inside the grid:
  var aMatches = fieldId.match(/^\[equipmentList\]\[(\d+)\]\[hasDiscount\]$/);

  if (aMatches) {
    var rowNo = aMatches[1];
    
    if (newVal == "Discount") {
      $("#form\\[equipmentList\\]\\["+rowNo+"\\]\\[discountRate\\]").prop("disabled", false);
    }  
    else {   // if (newVal=="No Discount"):
      $("#form\\[equipmentList\\]\\["+rowNo+"\\]\\[discountRate\\]").prop("disabled", true);
      
      //delete the existing value in the discountRate field:
      $("#form\\[equipmentList\\]\\["+rowNo+"\\]\\[discountRate\\]").val("");
      $("#form\\[equipmentList\\]\\["+rowNo+"\\]\\[discountRate_label\\]").val("");
    }    
  }
});

When the form is used, selecting an option in the "hasDiscount" field will enable or disable the "discountRate" field:

EnableOrDisableFieldsInGrid-FormInUse.png