Page 1 of 1

on click in a row grid

Posted: Tue Aug 29, 2017 10:47 am
by AbbesMA
Hi,

I have a grid and a text column in this grid, i would like if i click on a row in this column to execute à Javascript function.

Thanks

Re: on click in a row grid

Posted: Tue Aug 29, 2017 4:21 pm
by amosbatto
You can use JavaScript code like this in your DynaForm to set an event handler for a column in a grid:
Code: Select all
var gridId  = "clientList"; //set to the ID of the grid
var fieldId = "lastName";  //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("Row "+rowNo+" needs to be filled.");
  }
}
Change the ID of the grid and the field inside the grid to match your DynaForm. Here is a sample form with the code that you can import:
(2.5 KiB) Downloaded 691 times

Re: on click in a row grid

Posted: Wed Aug 30, 2017 7:42 am
by AbbesMA
Hi amosbatto,

It works, thanks