[sonylam]

Hi, every Master,
Can i change the "NEW" buttom below the row (grid) ?

below.jpg (12.68 KiB) Viewed 9176 times

while i add so many record, if the buttom above the row ,
i need to scroll so many distance up and down to add new record,
it`s so trouble!

[amosbatto]

Try adding this JavaScript code to your DynaForm:

Code: Select all

var oNewButton = $("#myGrid").find("button.pmdynaform-grid-newitem");
$("#myGrid").append(oNewButton);

Where myGrid is the ID of your grid.

[sonylam]

Dear Amosbatto,

Thank you for your reply,

my grid name is ExpensesGrid , so the code is

Code: Select all

var oNewButton = $("#ExpensesGrid").find("button.pmdynaform-grid-newitem");
$("#ExpensesGrid").append(oNewButton);

or
NO #

Code: Select all

var oNewButton = $("ExpensesGrid").find("button.pmdynaform-grid-newitem");
$("ExpensesGrid").append(oNewButton);

or
Gird UID = 73495157257baa252986a84047572651

Code: Select all

var oNewButton = $("#73495157257baa252986a84047572651").find("button.pmdynaform-grid-newitem");
$("#73495157257baa252986a84047572651").append(oNewButton);

but it display

$function.JPG (13.52 KiB) Viewed 9168 times

Is it my PM version is 2.5.2 , so this code cant use?

[ashkufaraz]

I think in version 2.x you can not use jquery ($).
you can use jquery only in version 3.x
you must use javascript
like this

Code: Select all

var btn = document.getElementsByClassName("pmdynaform-grid-newitem")[0];
 
var grid=document.getElementsById("ExpensesGrid")
grid.innerHTML = grid.innerHTML + btn.innerHTML;

[sonylam]

Hi, Ashkufaraz

Thank you very much for your reply and help,

i try it but it show:

notfunction.JPG (14.39 KiB) Viewed 9157 times

because i am not set the gird id?
where can set the gird id?

Code: Select all

var btn = document.getElementsByClassName("pmdynaform-grid-newitem")[0];
var grid = document.getElementsById("ExpensesGrid")
grid.innerHTML = grid.innerHTML + btn.innerHTML;

it show miss ";" , so i add the ";" below ("ExpensesGrid")

Code: Select all

var btn = document.getElementsByClassName("pmdynaform-grid-newitem")[0];
var grid = document.getElementsById("ExpensesGrid");
grid.innerHTML = grid.innerHTML + btn.innerHTML;

so sorry for trouble for you so much,
because i am a programming newbie,
i try to find the HTML editor to do that,
but it`s not has places to change it,
because just a "{$form.ExpensesGrid}",
i dont how to edit it!

please Help!



Sony

[amosbatto]

Change getElementsById to getElementById.

Try this:

Code: Select all

var btn = document.getElementsByClassName("pmdynaform-grid-newitem")[0];
var grid = document.getElementById("ExpensesGrid");
grid.innerHTML = grid.innerHTML + btn.innerHTML;

[sonylam]

Hi, Amosbatto,

Thank you very much for your Help,

i try it , it show above:

lessS.JPG (89.21 KiB) Viewed 9149 times

my code is :

Code: Select all

var btn = document.getElementsByClassName("pmdynaform-grid-newitem")[0];
var grid = document.getElementById("ExpensesGrid");
grid.innerHTML = grid.innerHTML + btn.innerHTML;

Please help me more,

Sony

[amosbatto]

Sony,
I fiddled with this for a bit. Try this code:

Code: Select all

var oRow = document.getElementById("form[ExpensesGrid]").insertRow(-1);
var sRow = document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.innerHTML;
sRow = sRow.replace('[addLink]', '[addLink2]');
document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.parentNode.style.display="none";          
oRow.innerHTML = sRow;

[sonylam]

Dear Aamosbatto,

Thank you very much,

it`s work on dynaform editor,

dynaform.JPG (43.78 KiB) Viewed 9139 times

but while i use the process, it`s not work

run.JPG (36.97 KiB) Viewed 9139 times

Sony

[ashkufaraz]

Try this

Code: Select all

function DocumentIsReady(){
	var oRow = document.getElementById("form[ExpensesGrid]").insertRow(-1);
	var sRow = document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.innerHTML;
	sRow = sRow.replace('[addLink]', '[addLink2]');
	document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.parentNode.style.display="none";          
	oRow.innerHTML = sRow;
}
var dynaformOnload = DocumentIsReady

[sonylam]

Dear Ashkufaraz,

it`s work ,

Thank you so much for your help.


Sony

[amosbatto]

Hey I posted that code, but phpBB shows it as being a post by Ashkufaraz. Sorry about that ashkufaraz. I must have accidentally edited your last post instead of posting a new reply. Hopefully I didn't overwrite anything too important!

[sonylam]

Dear Amosbatto and Ashkufaraz,

Thank you so much...so much for yours Help.

now i try add one more js to control the grid`s row,

change the button below the grid (i call the name is "below" js)

Code: Select all

function DocumentIsReady(){
   var oRow = document.getElementById("form[ExpensesGrid]").insertRow(-1);
   var sRow = document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.innerHTML;
   sRow = sRow.replace('[addLink]', '[addLink2]');
   document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.parentNode.style.display="none";          
   oRow.innerHTML = sRow;
   }
var dynaformOnload = DocumentIsReady;

if i want to add the limit the grid`s row function,(that`s code i found at the forum)
i add to another js field (i call the name is "limit" js)

Code: Select all

getField('ExpensesGrid][bullet').parentNode.childNodes[2].onclick = function() {
   if (Number_Rows_Grid("ExpensesGrid", "Description") < 5)
      getObject("ExpensesGrid").addGridRow();
   else
      alert("No more than 5 items is allowed!");
};

i dont understand,
"below" js is control the screen,
use "parentNode" to change the aligh right or left,
it just change button below the grid at the screen,
just change the VIEW, right?

while i add the "limit" js , it cant control the grid `s row? (it`s work alone)
in my mind, change the VIEW but the structure parameters was not change, right?

"limit" js code is call the bullet / Number_Rows_Grid is the struture parameters?
is that sentence " getField('ExpensesGrid][bullet').parentNode.childNodes[2].onclick " get the wrong Parameters ,
so...it cant work?


Sony

[amosbatto]

I'm not sure that I understand your English. Are you asking if you can limit the number of rows in the grid to a number set in a field named "limit"?

In that case, here would be the code:

Code: Select all

function DocumentIsReady(){
   var oRow = document.getElementById("form[ExpensesGrid]").insertRow(-1);
   var sRow = document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.innerHTML;
   sRow = sRow.replace('[addLink]', '[addLink2]');
   document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.parentNode.style.display="none";         
   oRow.innerHTML = sRow;
   
   getField('ExpensesGrid][bullet').parentNode.childNodes[2].onclick = function() {
      var limit = parseInt(getField("limit").value);
      if (Number_Rows_Grid("ExpensesGrid", "Description") < limit)
          getObject("ExpensesGrid").addGridRow();
      else
          alert("No more than "+limit+" items are allowed!");
   }
}
var dynaformOnload = DocumentIsReady

Where "ExpensesGrid" is the name of the grid, "Description" is the name of a field inside the grid, and "limit" is the name of a field outside the grid.

[sonylam]

Dear Amosbatto,

Thank you for your reply,

So sorry, my english so poor !

After change the "NEW" button below the grid,

i just want to limit the row (for example limit only 4 rows, no more 4 row )

limitrow.JPG (35.99 KiB) Viewed 9115 times

After this "NEW" button sucess, i want to add another js code to limit the row,

but the code just work alone, if work with the "below" js code, this limit.js is not work)

(limit.js)

Code: Select all

getField('ExpensesGrid][bullet').parentNode.childNodes[2].onclick = function() {
   if (Number_Rows_Grid("ExpensesGrid", "Description") < 4)
      getObject("ExpensesGrid").addGridRow();
   else
      alert("No more than 4 clients is allowed!");
}

(below.js)

Code: Select all

function DocumentIsReady(){
   var oRow = document.getElementById("form[ExpensesGrid]").insertRow(-1);
   var sRow = document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.innerHTML;
   sRow = sRow.replace('[addLink]', '[addLink2]');
   document.getElementById("form[ExpensesGrid][addLink]").parentNode.parentNode.parentNode.style.display="none";          
   oRow.innerHTML = sRow;
}
var dynaformOnload = DocumentIsReady

2js.jpg (61.46 KiB) Viewed 9115 times

Sony

[amosbatto]

Sony, So it now works? or do you still have a question?

[sonylam]

Master Amosbatto,

Thank yor for your reply,

The code did not work.

i try to create a field call " limit" (default 5),

Can change below the button,

but still cant limit the row.

Trying.

Sony

[amosbatto]

Sony, I have a simpler solution for you.

Go to the properties of your grid and unmark the "Add New Rows" option. Then add a button named "addRow" underneath the grid. Then use this code:

Code: Select all

var dynaformOnload = function() {
  getField("addRow").onclick = function() {
    var limit = 3;
    if (Number_Rows_Grid("clientList", "name") < limit) {
      getObject("clientList").addGridRow();
    }
    else {
      alert("No more than "+limit+" clients are allowed!");
    }
  }
}

Where "clientList" is the name of the grid, "name" is a field in the grid, and "addRow" is the name of the button.

Attached is a sample process that you can study:

test_grid_limits.pm

(3.9 KiB) Downloaded 396 times

[sonylam]

Dear Amosbatto,

Of course ProcessMaker Master !!

this is very very great solution,

and thank you very much your help and teaching me more,

Thank you very much!

P.S. how to take this case to [SOLVED] status?

Sony