[PedroIsai]

Hi,

Is there a way to read a click on the entire row in a grid? not just in a element inside a row.
and also I want to add style to that row on mouseover, For example add background color on mouseover to the row.

Currently I have a javascript code to read a click in the ID textbox inside the row, but I want to click on any part of the row

Code: Select all

var gridId  = "grid"; //set to the ID of the grid
var fieldId = "Name";  //set to the ID of the field in grid

//set click event handler when the DynaForm loads for any existing rows in the grid:
var nRows = $("#"+gridId).getNumberRows();

for (var i = 1; i <= nRows; i++) { 
  $("#\\["+gridId+"\\]\\["+i+"\\]\\["+fieldId+"\\]").click(clickHandler);
}

//set click event handler when a new row is added:
$("#"+gridId).onAddRow(function(aNewRow, oGrid, rowIndex) {
  $("#\\["+gridId+"\\]\\["+rowIndex+"\\]\\["+fieldId+"\\]").click(clickHandler);  
});

//click event handler function to display an alert if the field is left empty:
function clickHandler() {
  var rowNo = $(this).prop("id").match(/\]\[(\d+)\]\[/)[1]
  var val = $(this).find("input.form-control").val();
  if (val != '') {     
     //alert("Click on row number "+rowNo);
     //alert("Row "+val+" needs to be filled.");
	
    var vulnId = $("#grid").getValue(rowNo, 1)
    alert("Name "+ vulnId);
    $("#9632281615b4c9a5278f055089913739").showFormModal();
    $("#9632281615b4c9a5278f055089913739").submitForm()
    $("#9632281615b4c9a5278f055089913739").hideFormModal();
  }
}

Thanks in advance

[amosbatto]

See the JavaScript in this Dynaform:

test.json

(2.58 KiB) Downloaded 355 times

[PedroIsai]

See the JavaScript in this Dynaform:
test.json

For some reason is marking an issue "cannot read property of match" in the clickHandler.

[amosbatto]

I don't see the problem in Firefox 51 with ProcessMaker 3.2.1. What browser and what version of ProcessMaker are you using?

[PedroIsai]

I don't see the problem in Firefox 51 with ProcessMaker 3.2.1. What browser and what version of ProcessMaker are you using?

I'm using ProcessMaker 3.1.3, chrome version 62.0.3202.89,
do you think the problem could be the version?

[amosbatto]

I just tried the same Dynaform in PM 3.1.3 in Firefox 51 and Chrome 57 (in Debian 8.4) and I don't see any problem.

You will have a problem if your grid row doesn't have a text, suggest or datetime field in it, since this line searches for the first input field in the row:

Code: Select all

   var firstFieldInRow = $(this).find("input.form-control").first();

If you use this, it should work with any type of field:

Code: Select all

   var firstFieldInRow = $(this).find(".form-control").first();

If it still doesn't work, then export your Dynaform and post your .json file.

[PedroIsai]

I just tried the same Dynaform in PM 3.1.3 in Firefox 51 and Chrome 57 (in Debian 8.4) and I don't see any problem.

You will have a problem if your grid row doesn't have a text, suggest or datetime field in it, since this line searches for the first input field in the row:

Code: Select all

   var firstFieldInRow = $(this).find("input.form-control").first();

If you use this, it should work with any type of field:

Code: Select all

   var firstFieldInRow = $(this).find(".form-control").first();

If it still doesn't work, then export your Dynaform and post your .json file.

I found the problem,
Basically the field is in view mode, so I changed it to edit and now it's working.
the problem was it couldn't read the value from the field.
Regards.

[rochoa]

the method setOnchange does not work
$("#\\["+gridId+"\\]\\["+rowIndex+"\\]\\["+fieldId+"\\]").setOnchange(clickHandler);