- Sun Dec 06, 2020 12:55 pm
#828708
Hi,
I tried to revise the grid in test.json in
https://forum.processmaker.com/viewtopic.php?t=730738
so as to fit my need.
I added a column gChgRow to the grid orderGrid to record the row number when the row is clicked.
I also added a field RowClicked to record the rows which have been clicked (in form of a list).
The javascript in the dynaform is revised as follows.
var gridId = "orderGrid"; //set to the ID of the grid
var fieldId = "item"; //set to the ID of the field in grid
var RowClicked = "RowClicked"; // set to the ID of the record field
// -- row clicked recording
$("#RowClicked").setValue("") ;
// $(RowClicked).setValue("") ;
var RowClickedLst = "" ;
//set click event handler when the DynaForm loads for any existing rows in the grid:
var aRows = $("#"+gridId).find("div.pmdynaform-grid-row");
aRows.click(clickHandler);
aRows.mouseover(mouseoverHandler);
aRows.mouseout(mouseoutHandler);
//set click event handler when a new row is added:
$("#"+gridId).onAddRow(function(aNewRow, oGrid, rowIndex) {
aRows = $("#"+gridId).find("div.pmdynaform-grid-row");
aRows.click(clickHandler);
aRows.mouseover(mouseoverHandler);
aRows.mouseout(mouseoutHandler);
});
function mouseoverHandler() {
$(this).css("background-color", "lightgreen");
}
function mouseoutHandler() {
$(this).css("background-color", ''); //reset to orginal color
}
//click event handler function to display an alert if the field is left empty:
function clickHandler() {
var firstFieldInRow = $(this).find("input.form-control").first();
var rowNo = firstFieldInRow.prop("id").match(/\]\[(\d+)\]\[/)[1];
// alert("Clicked on row number " + rowNo);
$("#"+gridId).setValue(rowNo, rowNo, 3);
// --- write click list to field
// if not empty RowClickedLst, then concat to RowClickedLst
if (RowClickedLst == "") {RowClickedLst = rowNo ;}
else {RowClickedLst = RowClickedLst.concat(",", rowNo) ; };
$("#RowClicked").setValue(RowClickedLst);
}
These code basically work with an interesting outcome.
For example, if there are three rows in the grid orderGrid,
when row 1 is clicked, the row number '1' will be appended 3 times to the RowClickedLst;
when row 2 is clicked, the row number '2' will be appended twice to the RowClickedLst;
when row 3 is clicked, the row number '3' will only be appended once to the RowClickedLst.
The number of iterations increase according to the number or rows in the grid.
However, I found no iteration construct in my code.
I found the problem also occured with the code in
https://forum.processmaker.com/viewtopic.php?t=730738
Grateful if I can be advised how to fix the problem.
Thousand thanks
cheers,
Karl
PS I'm using PM 3.2.1 community
I tried to revise the grid in test.json in
https://forum.processmaker.com/viewtopic.php?t=730738
so as to fit my need.
I added a column gChgRow to the grid orderGrid to record the row number when the row is clicked.
I also added a field RowClicked to record the rows which have been clicked (in form of a list).
The javascript in the dynaform is revised as follows.
var gridId = "orderGrid"; //set to the ID of the grid
var fieldId = "item"; //set to the ID of the field in grid
var RowClicked = "RowClicked"; // set to the ID of the record field
// -- row clicked recording
$("#RowClicked").setValue("") ;
// $(RowClicked).setValue("") ;
var RowClickedLst = "" ;
//set click event handler when the DynaForm loads for any existing rows in the grid:
var aRows = $("#"+gridId).find("div.pmdynaform-grid-row");
aRows.click(clickHandler);
aRows.mouseover(mouseoverHandler);
aRows.mouseout(mouseoutHandler);
//set click event handler when a new row is added:
$("#"+gridId).onAddRow(function(aNewRow, oGrid, rowIndex) {
aRows = $("#"+gridId).find("div.pmdynaform-grid-row");
aRows.click(clickHandler);
aRows.mouseover(mouseoverHandler);
aRows.mouseout(mouseoutHandler);
});
function mouseoverHandler() {
$(this).css("background-color", "lightgreen");
}
function mouseoutHandler() {
$(this).css("background-color", ''); //reset to orginal color
}
//click event handler function to display an alert if the field is left empty:
function clickHandler() {
var firstFieldInRow = $(this).find("input.form-control").first();
var rowNo = firstFieldInRow.prop("id").match(/\]\[(\d+)\]\[/)[1];
// alert("Clicked on row number " + rowNo);
$("#"+gridId).setValue(rowNo, rowNo, 3);
// --- write click list to field
// if not empty RowClickedLst, then concat to RowClickedLst
if (RowClickedLst == "") {RowClickedLst = rowNo ;}
else {RowClickedLst = RowClickedLst.concat(",", rowNo) ; };
$("#RowClicked").setValue(RowClickedLst);
}
These code basically work with an interesting outcome.
For example, if there are three rows in the grid orderGrid,
when row 1 is clicked, the row number '1' will be appended 3 times to the RowClickedLst;
when row 2 is clicked, the row number '2' will be appended twice to the RowClickedLst;
when row 3 is clicked, the row number '3' will only be appended once to the RowClickedLst.
The number of iterations increase according to the number or rows in the grid.
However, I found no iteration construct in my code.
I found the problem also occured with the code in
https://forum.processmaker.com/viewtopic.php?t=730738
Grateful if I can be advised how to fix the problem.
Thousand thanks
cheers,
Karl
PS I'm using PM 3.2.1 community