[azirol]

Hi,
Can someone help me to define number.integer format in the dynaform.
I've half multiple field which require user to key the amount of the claim. i tried to make dynaform automatically change once user key in any number for example if they key in "50", dynaform convert to 50.00 or if 1200 = 1,200.00

i have a grid type and text type which calculate the total (please see attached). unfortunately the text file works fine but not for the "total" field in grid area. in grid if user put 1,200 it will convert to 1 in total field and shown 1.00 in text field.

its already been 1 month tried this but no luck.

Thanks.

[amosbatto]

You can follow this example:
https://www.pmusers.com/index.php/Europ ... )_in_grids
At the bottom of the example, it explains how to change the JavaScript code to use numbers like 12,345.67.

These other examples also might help you:
https://www.pmusers.com/index.php/Refor ... sum_column
https://www.pmusers.com/index.php/Formu ... mn_summary

[hendrick]

Hi Amos,
I followed your recommended link https://www.pmusers.com/index.php/Reformat_numbers_in_grid_to_sum_column and downloaded Reformat numbers to sum grid column.json and tried it, but it did not work. The form has no external lib. I tried to add jquery.masknumber.js as external lib. It didn't work. I change the external lib with jquery.maskedinput.min.js, it still did not work. Is there anything wrong with what I did? Please help. Thanks

[kirkwg]

Hi there,

I tried several external jquery Lib for mask input as well, finally I selected autoNumeric() that you may try. It is easy to use so far, but you need to play around it first in order to understand how to use.

//doc for autoNumeric v1.8
http://www.decorplanit.com/plugin/

Note, don't use any latest version of autoNumeric() as it may NOT compatible with jQuery. Use my recommended version as I already tested and used with ProcessMaker v3.x at least.

Steps to be noticed:
1. put the link below into the "external Libs" property of your Dynaform:
https://cdn.bootcdn.net/ajax/libs/autonumeric/1.8.8/autoNumeric.js

2. Create at least 2 or 3 textboxes and 1 grid with a textbox in Dynaform for testing
i.e. 1 textbox for user inputting raw number or integer with decimal figure
i.e. 1 textbox for copying the 1st textbox value into this 2nd textbox with autoNumeric init, and set methods etc.

3. Show you some examples of the tricky syntax below.

4. Kindly try, if still not working for you, I could show you an example of how to use it next time, good luck!
Let me know any progress, cheers...

Code: Select all

//JS code
//e.g. initialize 1-time only for which textbox that will use autoNumeric()
$('#txt_apAmount').getControl().autoNumeric();

//e.g.update the total invoice amount txt_apTIAmount by:
        var summary = $("#"+gridId).getSummary("txt_amount");
        $("#txt_apAmount").getControl().autoNumeric("set", summary); 

//e.g. apply autoNumeric() on a textbox in a Grid
     $('#grid01').getControl(1,1).autoNumeric(); 
     $('#grid01').getControl(1,1).autoNumeric('set', 0);  //or
     $('#grid01').getControl(1,1).autoNumeric('set', summary);

//get back the raw numeric from formatted textbox
var rawAmount = $('#grid01').getControl(1,1).autoNumeric('get');

[hendrick]

Thanks very much for your kind assistance. I will let you know the progress.
Cheers

[hendrick]

Hi, @kirkwg
Just to update you. I have tried all the codes you gave, but only the following codes work:
$('#txt_apAmount').getControl().autoNumeric(); // this works well
$('#grid01').getControl(1,1).autoNumeric(); //it works but this line of code only works for the first row in the grid and when I add a second row, it does not change the format for the second row. Is there any workaround so that the format is changed for all rows in the same column.
Thanks in advance.. cheers

[kirkwg]

Hi Hendrick,

Thanks for letting me know the status. I tested the code below it works for adding new rows on grid. Enjoy..
see attached screen shot as well ^^

Code: Select all

$("#grid01").onAddRow(function(aNewRow, oGrid, rowIndex) {
        //aNewRow[0].setValue("1");
        aNewRow[0].getControl().autoNumeric();    //index 0 = first column field on new row
        //set the background color of the new row to orange:
        aNewRow[0].el.parentNode.parentNode.style.backgroundColor = "orange";
});

[hendrick]

Hi Kirkwg.
It works like charm. Thank you so much
I hope you don't mind if I ask you another question. If I insert another text column in the grid, the change only affects the first column, the other column is not changed. Is there a solution to change the other columns in the grid, or is there a solution to change specific columns (for example only column 3 and column 5).
Sorry for the question. I am a newbie and not a developer

[kirkwg]

Assuming the grid you have defined 10 columns, simplly apply autoNumeric to the column text fields you want by

Code: Select all

$("#grid01").onAddRow(function(aNewRow, oGrid, rowIndex) {
        aNewRow[0].getControl().autoNumeric();    //index 0 = first column field on new row

       aNewRow[2].getControl().autoNumeric();    //index 2 for column 3
      aNewRow[4].getControl().autoNumeric();     //index 4 for column 5
        //set the background color of the new row to orange:
        aNewRow[0].el.parentNode.parentNode.style.backgroundColor = "orange";
});

[hendrick]

HI Kirkwg,
I have tried your code, it works well. However I am wondering why it works only starting from the second row onward while the first row remains unchanged except the first column.
Please help check what is wrong with the following:
$('#gridVar001').getControl(1,1).autoNumeric();
$("#gridVar001").onAddRow(function(aNewRow, oGrid, rowIndex) {
//aNewRow[0].setValue("1");
aNewRow[0].getControl().autoNumeric(); //index 0 = first column field on new row
aNewRow[1].getControl().autoNumeric(); //index 1 for column 2
aNewRow[3].getControl().autoNumeric(); //index 3 for column 4
//set the background color of the new row to pale_turquoise:
aNewRow[0].el.parentNode.parentNode.style.backgroundColor = "PaleTurquoise";
});

What should I do if I want the change to only affect column 2 and 4 right from the start. This code "$('#gridVar001').getControl(1,1).autoNumeric(); only change column 1 .

Thanks for your help
Cheers

[kirkwg]

Hi,
You have to try understand the logic behind, otherwise you will get so many questions.

JS code syntax is about "$('#gridVar001').getControl(row,column).autoNumeric();

You haven't initialize those 2 fields that why no effect on it.
For Grid get started and displayed in 1 empty record/row, then we need initialize the first row:

Code: Select all

$('#gridVar001').getControl(1,1).autoNumeric();    //row 1, column 1
$('#gridVar001').getControl(1,2).autoNumeric();    //row 1, column 2
$('#gridVar001').getControl(1,4).autoNumeric();   //row 1, column 4

For Grid get started and displayed with NO record or NO row, then grid.onAddRow() is enough.. it will do all rows for you
See screenshot for No records like for a grid below:

[hendrick]

Hi Kirkwg,
Now I understand.
Thanks..You have been very helpful and I appreciate it. I owe you a glass of beer
Cheers

[kirkwg]

Hi

You are welcome. It's my pleasure if I could help. Cheers!

[Davesdewas]

Thanks..You have been very helpful and I appreciate it.

https://get-mobdro.com/