Make grid rows read-only

From pmusers
Jump to: navigation, search

The editing of the contents of a grid can be prevented by setting its mode property to "view" or "disabled", but this applies to all the rows in the grid. JavaScript code can be added to a Dynaform to prevent the editing of specified rows in a grid.

For example, the following JavaScript code prevents the editing of the third row in a grid whose ID is "orderList":

if ($("#orderList").getNumberRows() >= 3) {
  var oRow = $("#orderList").find("div.pmdynaform-grid-row").eq(2);

  oRow.find("input").prop("readOnly", true);
  oRow.find("textarea").prop("readOnly", true);
  oRow.find("input[type='checkbox']").prop("disabled", true);
  oRow.find("select").prop("disabled", true);
  oRow.find(".glyphicon-calendar").parent().hide();    //hide datatime picker icon
  oRow.find("button").prop("disabled", true);          //disable delete button and button for file control
  oRow.find("a.pm-multiplefile-upload").prop("disabled", true);
}

This code sets the readOnly or disabled property to true, so the fields in the row can't be edited.

When searching for a particular row in a grid, remember to use grid.getNumberRows() to make sure that the grid row exists before setting it to read-only. $("#grid-id").find("div.pmdynaform-grid-row") will find all the existing rows in the grid (as long as the grid has the default configuration to show all rows at once). jQuery's .eq() function is used to select a particular row. Remember that .eq() starts counting from 0, so so that .eq(2) is the third row in the grid.

Setting all existing rows to read-only

If editing a grid for the second time, it may be useful to prevent the current user from changing the rows entered by the previous user. JavaScript code can be added to set all the existing rows to read-only, so the current user can change the work of the previous user who filled out the grid.

The following JavaScript code makes all the existing rows read-only in the "orderList" grid when the DynaForm loads:

var oRows = $("#orderList").find("div.pmdynaform-grid-row");
oRows.find("input").prop("readOnly", true);
oRows.find("textarea").prop("readOnly", true);
oRows.find("input[type='checkbox']").prop("disabled", true);
oRows.find("select").prop("disabled", true);
//hide datatime selector:
oRows.find(".glyphicon-calendar").parent().hide();    
//disable delete button and button for file control:
oRows.find("button").prop("disabled", true);          
oRows.find("a.pm-multiplefile-upload").prop("disabled", true);

Making rows read-only based on rows' values

The rows in a grid can be made read-only based on the values in each row.

For example, the following code sets rows in the "orderList" grid to read-only if their "alreadyOrdered" checkbox is marked when the DynaForm is loaded:

var gridId = "orderList";
var nRows = $("#"+gridId).getNumberRows();
var alreadyOrderedColumnNo = 4;

for (var i = 1; i <=nRows; i++) {
  
  //if checkbox is marked, then make row read-only
  if ($("#"+gridId).getValue(i, alreadyOrderedColumnNo) == "1") {
    var oRow = $("#"+gridId).find("div.pmdynaform-grid-row").eq(i-1);
    oRow.find("input").prop("readOnly", true);
    oRow.find("textarea").prop("readOnly", true);
    oRow.find("input[type='checkbox']").prop("disabled", true);
    oRow.find("select").prop("disabled", true);
    oRow.find(".glyphicon-calendar").parent().hide();    //hide datatime selector
    oRow.find("button").prop("disabled", true);          //disable button for file control
    oRow.find("a.pm-multiplefile-upload").prop("disabled", true);
  }
}