How can I have my panel grow based on the repeating section's rows added programmatically?

[ksivanandan]

Hello

I am retrieving data from SharePoint list and populating my repeating section, the panel does not grow but I get a small scroll bar in its place and I cannot see anything inside. I have attached my javascript.

Any help is greatly appreciated!

Thanks 

Kalpana

[chaitra_b_c]

Ensure the panel is big enough to hold the complete repeating section without any overlapping. 

If the issue still persists do share the Nintex Form in design mode, for more clarity.

[ksivanandan]

The repeating section rows are not static, based on my dropdown choice I run a REST API call, retrieve items and add rows. WIll this be a problem?

[chaitra_b_c]

No, that will not be an issue.

Check for below points:

1. Ensure all the controls inside the panel are highlighted when the panel is selected
2. Ensure enough spacing between each control

Refer the below screenshot:

[ksivanandan]

Thanks for replying to my questions!

This is how I have it now in a panel

[chaitra_b_c]

Provide more spacing between the controls in the below highlighted area: 

[ksivanandan]

This is what i have now

And this is the code to populate the repeating section

NWF$.each(results.d.results, function(i, item)
{
NWF$(".myNounModifier .nf-repeater-row:last .charTitle input").val(item.Characteristics);
NWF$(".myNounModifier .nf-repeater-row:last .charDescription textarea").val(item.Definition);
if(item.Mandatory)
NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Required");
else
NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Not Required");
NWF$(".myNounModifier").find('a').click();
});

The results

and strangely the last empty row is not present - instead a blank space - I think this is the issue but not sure how to fix this

Apart from this I have to perform other functionalities like deleting the rows and retrieving new data and populating the repeating control. This has been a huge headache, so many hours spent. None of my control are touching each other. 

Any help is greatly appreciated 

Thanks

Kalpana

[chaitra_b_c]

The below picture clearly shows that repeating section is taking more space than what is provided by the panel:

Do provide more space as mentioned or even beyond and check for the controls in the Form preview mode:

[ksivanandan]

Thanks for working with me on this: So currently I added space

but it still looks like this

I also have code to show and hide the delete button and the Add new row on a dropdown bind

NWF$(document).ready(function()

{

                NWF$("#"+ NounModifier).bind("change", GetCharacteristics);

});

function GetCharacteristics()

{

    // only execute this function if the script has been loaded

    if (ready)

    {

                                                var selectedNoun;

                                                var selectedNounModifier;

                                                selectedNoun = NWF$('#' + Noun).find('option:selected').text();

                                                selectedNounModifier = NWF$('#' + NounModifier).find('option:selected').text();

                                                NWF$(".myNounModifier").find('a').show();

                                                NWF$(".myNounModifier").find('img').show();

                                                //Remove previous values if there are any

                                                NWF$(".myNounModifier .nf-repeater-row").each(function(){

                                                var title = NWF$(this).find('.charTitle input').val();

                                                if(title != "")

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

                                                });

                                                var restQuery = SPAppWebUrl + "/_api/SP.AppContextSite(@target)/web/lists/GetByTitle('Noun-Modifier-Characteristics')/items?$select=Noun/Title,NounModifier/Title,Characteristics,Mandatory,Definition,Value&$expand=Noun,NounModifier&$filter=(Noun/Title eq '" + selectedNoun+ "') and (NounModifier/Title eq '" + selectedNounModifier + "')&@target='" + SPHostUrl + "'";

                                                // create  new executor passing it the url created previously

                                                var executor = new SP.RequestExecutor(SPAppWebUrl);

                                                // execute the request, this is similar although not the same as a standard AJAX request

                                                executor.executeAsync(

                                                {

                                                                url: restQuery,

                                                                method: "GET",

                                                                headers: { "Accept": "application/json; odata=verbose" },

                                                                success: function (data)

                                                                {

                                                                                // parse the results into an object that you can use within javascript

                                                                                var results = eval(JSON.parse(data.body));

                                                                                NWF$.each(results.d.results, function(i, item)

                                                                                {

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charTitle input").val(item.Characteristics);

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charDescription textarea").val(item.Definition);

                                                                                                if(item.Mandatory)

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Required");

                                                                                                else

                                                                                                NWF$(".myNounModifier .nf-repeater-row:last .charRequired input").val("Not Required");

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

                                                                                });

                                                                                NWF$(".myNounModifier .nf-repeater-row:last").addClass("rptClass");

                                                                                NWF$(".myNounModifier").find('a').hide();

                                                                                NWF$(".myNounModifier").find('img').hide();

                                                                },

                                                                error: function (data)

                                                                {

                                                                                // an error occured, the details can be found in the data object.

                                                                                alert("Ooops an error occured");

                                                                }

                                                });

                                                //set the textbox to the currently selected dropdown value

                                                NWF$('#' + txtNounModifier).val(NWF$('#' + NounModifier).find('option:selected').text());

                                }

                }

}

[chaitra_b_c]

If you wish to hide the Add Row and Delete option use the below setting in Repeater Section rather doing in the script:

Also. notices an extra ending '}' in the above code. Please do use browser developer tool (pressing F12) and check if any script errors are found in the console.