Copy Grid

From pmusers
Jump to: navigation, search

Automatically copy the contents of one grid to another grid

The first example shows how to use JavaScript to automatically copy the contents from one grid to an identical grid, while the user is filling out the first grid. The second example shows how to copy the the contents from one grid to a different grid whose fields are in a different order.

Copy identical grids

First, create a DynaForm with two grids whose fields are identical, except that their fields have different IDs:

Grids-copyGrid-formWith2GridsInDesigner.png

The fields in the second grid are set to "view" mode.

Then, add the following JavaScript code to the DynaForm:

$( "#" + $("form").prop("id") ).setOnchange( function( fieldId, newValue, oldValue ) {
   var aMatches = fieldId.match(/^\[orderGrid\]\[(\d+)\]\[(\w+)\]$/);
  
   if (aMatches) {    
     var rowNo       = aMatches[1];
     var gridFieldId = aMatches[2];
     var aCols = $("#orderGrid").getInfo().columns;
     var colNo = 0;
     
     //from the field name, find its column number in grid1:
     for (var i = 0; i < aCols.length; i++) {
       if (aCols[i].id == gridFieldId) {
         colNo = i+1;
         break;
       }
     }
     
     if (colNo) {
       //workaround because checkboxes have a value of '"1"' and not "1":
       if (aCols[ colNo-1 ].type == "checkbox") {
         newValue = (newValue == '"1"' ? "1" : "0");
       }
       $("#receiptGrid").setValue(newValue, rowNo, colNo);
     }
   }
});

$("#orderGrid").onDeleteRow(function(oGrid, aRow, rowIndex) {
  $("#receiptGrid").deleteRow(rowIndex);
});

$("#orderGrid").onAddRow(function(aNewRow, oGrid, rowIndex) {
  $("#receiptGrid").addRow();
});

In this example, the first grid that the user manually fills out has the ID "orderGrid" and the copied grid has the ID "receiptGrid". The form.setOnchange() event handler is executed when a field changes in the form. A regular expression is used to check whether the field whose value which is changed is from the "orderGrid". Then, the code searches in the orderGrid's columns, to find a matching field name and set the column number of the field inside the grid. Using the row number and column number, the value is copied from the "orderGrid" to the corresponding cell in the "receiptGrid". Obviously, this code will only work correctly if the two grids have identical fields.

If a row is deleted or added in the "orderGrid", then it is also deleted or added in the "receiptGrid", so the two grids should always have the same number of rows.

File:Grids/copyGrid/GridCopiedInCase.png

Copy to grid with different field order

If the fields in the second grid are different from the fields in the first grid, the above code won't work correctly. This second code example shows how to copy the data from the "orderGrid" to the "receiptGrid" when the fields are in different positions.

Create a DynaForm with two grids that have fields in different positions:

File:Grids/copyGrid/CopyToDifferentGridInDesigner.png

Then, add the following JavaScript to the form:

//Map the column number of fields in grid1 to the column number of fields in grid2:
var oMapGrids = {
  1 : 1,
  2 : null, //doesn't have a corresponding field in grid2
  3 : 5,
  4 : 3
}

$( "#" + $("form").prop("id") ).setOnchange( function( fieldId, newValue, oldValue ) {
   var aMatches = fieldId.match(/^\[orderGrid\]\[(\d+)\]\[(\w+)\]$/);
  
   if (aMatches) {    
     var rowNo       = aMatches[1];
     var gridFieldId = aMatches[2];
     var aCols = $("#orderGrid").getInfo().columns;
     var grid1ColNo = 0;
     
     //from the field name, find its column number in grid1:
     for (var i = 0; i < aCols.length; i++) {
       if (aCols[i].id == gridFieldId) {
         grid1ColNo = i+1;
         break;
       }
     }
     
     if (grid1ColNo) {
       //workaround because checkboxes have a value of '"1"' and not "1":
       if (aCols[ grid1ColNo-1 ].type == "checkbox") {
         newValue = (newValue == '"1"' ? "1" : "0");
       }
       
       var grid2ColNo = oMapGrids[ grid1ColNo ];
       if (grid2ColNo) {
         $("#receiptGrid").setValue(newValue, rowNo, grid2ColNo);
       }
     }
   }
});

$("#orderGrid").onDeleteRow(function(oGrid, aRow, rowIndex) {
  $("#receiptGrid").deleteRow(rowIndex);
});

$("#orderGrid").onAddRow(function(aNewRow, oGrid, rowIndex) {
  $("#receiptGrid").addRow();
});