Questions and discussion about using ProcessMaker: user interface, running cases & functionality
By kleung
#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
By silviuA
#828746
Hi Karl,
I also don't understand why the iteration occurs, but I use this workaround:

instead of :
Code: Select all
//var aRows = $("#" + gridId).find("div.pmdynaform-grid-row");
//aRows.click(clickHandler);
//aRows.mouseover(mouseoverHandler);
//aRows.mouseout(mouseoutHandler);
I use :
Code: Select all
var nRows = $("#" + gridId).getNumberRows();
for (var i = 1; i <= nRows; i++) {
    $($('#' + gridId).find("div.pmdynaform-grid-row")[i - 1]).click(clickHandler);
    $($('#' + gridId).find("div.pmdynaform-grid-row")[i - 1]).mouseover(mouseoverHandler);
    $($('#' + gridId).find("div.pmdynaform-grid-row")[i - 1]).mouseout(mouseoutHandler);
}
Same thing when a new row is added:
Code: Select all
//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);

        $($('#' + gridId).find("div.pmdynaform-grid-row")[rowIndex - 1]).click(clickHandler);
        $($('#' + gridId).find("div.pmdynaform-grid-row")[rowIndex - 1]).mouseover(mouseoverHandler);
        $($('#' + gridId).find("div.pmdynaform-grid-row")[rowIndex - 1]).mouseout(mouseoutHandler);

});

I hope this helps you somehow.

Cheers,
Silviu

edited the post, some parts of code were not showing
Last edited by silviuA on Fri Dec 18, 2020 2:29 am, edited 1 time in total.

A 1xbet clone script is a pre-designed software so[…]

4rabet clone script is enabling entrepreneurs to e[…]

Parimatch clone script is enabling entrepreneurs t[…]

In the world of cryptocurrency, a wallet is an app[…]