cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

Dynamically add a new row to a repeating section

Jump to solution

Hi ,

I'm a newbie to the Nintex forms and technology but i'm really amazed by its capabilities. At the moment i'm designing a form for a customer and have two requirements .

1. I have a repeating section with the name "myrepsection" and I have another radio button with the name "MyRadBtn".On selecting yes in the radiobutton, i want a new repeating section row to be added within my repeating section "myrepsection" . Please keep in mind i have number of repeating sections on the form.

2. Is there a way to pre-populate a the first text box within the first row of a repeating section with current users. I'm able to populate the text box with the current user name within a repeating section.but this behavior is getting repeated in each row of the repeating section.  I just want the first textbox in the first row of the repeating section to be pre populated.

Any help is greatly appreciated.

Thanks,

0 Kudos
Reply
29 Replies
Not applicable

Re: Dynamically add a new row to a repeating section

Jump to solution

Okay, so i have figured out how to add the repeating section row dynamically

On click of another control use the below script. Here  ".myrepclasss" is set as  class of the repeating section. and 'a' is the anchor tag for 'Add New Row' in a repeating section.

NWF$(".myrepclasss").find('a').click();

But how can i delete the row dynamically on click of another control ? The delete button within a repeating section row seems to just an image as below 

<img class="nf-repeater-deleterow-image" style="padding: 2px;" src="/_layouts/15/NintexForms/images/NF_16x16_RepeaterDeleteRow.png">

0 Kudos
Reply
Highlighted
Workflow Hero

Re: Dynamically add a new row to a repeating section

Jump to solution

You can do exactly the same as for adding a row :

NWF$(".myrepclasss").find('.nf-repeater-deleterow-image').click();

Hope this helps

0 Kudos
Reply
Not applicable

Re: Dynamically add a new row to a repeating section

Jump to solution

Hi Caroline,

Thanks for the reply, I will give this a try and let you know.

However, I have a little different scenario as below

1.I have  number of Yes/No radio buttons on the Nintex forms and one repeating section.

2.The repeating section has a set of 5 text boxes.

3. On selecting an option  as No from Yes/No radio buttons on the nintex form, I  need to add a new row in the repeating section and populate the third text box with some text .

4. If I then rechange the selection from No to Yes, then i need to delete that corresponding row that was added to the repeating section when the radio button option No was selected.

How can I get the corresponding row in the repeating section which was added when the option No was selected from the radio button Yes/No

Appreciates your help in advance.

Thanks

0 Kudos
Reply
Workflow Hero

Re: Dynamically add a new row to a repeating section

Jump to solution

For this scenario, one solution would be to :

  • once the row is added, add a css class to this row. As it is the last row added, you can simply get this row with this script :
    • NWF$(".myrepclasss .nf-repeater-row:last").addClass("myParticularClass");
  • delete the row with the css class that you added using the following script :
    • NWF$(".myrepclasss .myParticularClass").find('.nf-repeater-deleterow-image').click();

Hope this helps

Reply
Not applicable

Re: Dynamically add a new row to a repeating section

Jump to solution

Caroline,

Thanks for your help. The suggestion really helps and works for adding and deleting the rows in repeating section .

Bit how can I set some values in the textboxes within each new row?

0 Kudos
Reply
Workflow Hero

Re: Dynamically add a new row to a repeating section

Jump to solution
0 Kudos
Reply
Not applicable

Re: Dynamically add a new row to a repeating section

Jump to solution

Hi Caroline,

Thanks for the tip on adding the new rows on the repeating section dynamically . However, this approach does not seem to be working when we have multiple radio buttons adding rows to a repeating section.

For example:

1. I have two radio buttons as below and whenever the option No is selected. It should add a new row to the repeating section and whenever Yes is selected , It should remove that particular row added to the repeating section

radiobutonsnRepSec.jpg

2. It does add a new row to the repeating section with a different class name .

No selection.jpg

3. Here is the class it adds when checked using IE DEV Tools

f12ResultsforClass.jpg

4. But when i change any of the radio buttons as Yes. It removes one row from the repeating section

1RowRemoved.jpg

5. But when i change the other radio button as Yes. It does not remove the corresponding row which was added (when option No was selected) from the repeating section. On taking a closer look using IE DEV Tools , it looks like the class that was originally added for the row has been changed because of deletion of other row.

RowClassChanged.jpg

Below is the jquery I use:

function AddRow(control,controlname)

{if(NWF$("#"+control).find("input:checked").val()=="No" ){

NWF$(".myrepclasss").find('a').click();NWF$(".myrepclasss .nf-repeater-row:last").addClass(controlname);} }

function RemoveRow(control,controlname)

{if(NWF$("#"+control).find("input:checked").val()=="Yes" ){alert(NWF$(".myrepclasss ."+controlname).find('.nf-repeater-deleterow-image').html());

if(NWF$(".myrepclasss ."+controlname).find('.nf-repeater-deleterow-image').html()==""){

NWF$(".myrepclasss ."+controlname).find('.nf-repeater-deleterow-image').click(); }} }

NWF$(document).ready(function(){

NWF$("#"+radbtn_1).change( function() {AddRow(radbtn_1,"radbtn_1");RemoveRow(radbtn_1,"radbtn_1");  });

NWF$("#"+radbtn_2).change( function() {AddRow(radbtn_2,"radbtn_2");RemoveRow(radbtn_2,"radbtn_2");  });});

Why do we have such behavior while using the repeating section ?

Thanks in advance for your help.

0 Kudos
Reply
Workflow Hero

Re: Dynamically add a new row to a repeating section

Jump to solution

Can you try with this AddRow method :

function AddRow(control,controlname) {

     if(NWF$("#"+control).find("input:checked").val()=="No" ) {

          NWF$(".myrepclasss").find('a').click();

          setTimeout(function() {

               NWF$(".myrepclasss .nf-repeater-row:last").addClass(controlname);

          }, 300);

     }

}

Hope it will work

0 Kudos
Reply
Not applicable

Re: Dynamically add a new row to a repeating section

Jump to solution

Hi Caroline,

As suggested , I tried the above script but it doesn't seem to work. It still displays the same behavior.

1. The rows get added on selection of No for both radio buttons,

2. but when one radio button is selected as Yes, it deletes that corresponding row .

3. When second radio button is selected as Yes. It does not delete any row.

4. I have set up alert on DeleteRow method as NWF$(".myrepclasss ."+controlname).find('.nf-repeater-deleterow-image').html()==""

which returns undefined when i select Yes for the second radio button.

Thanks in advance.

0 Kudos
Reply