Disable modification and deletion of repeating section row

  • 21 July 2020
  • 3 replies
  • 12 views
L
Badge +6

User request to disable deletion and modification of the existing repeating section items. It should allow adding new rows, but no deletion and modification.

I wrote the code below. However, it has 2 issues

--1. It disabled the dropdown and single line fields as expected, but the code has no effect on the Date/Time field. I tried both prop('disabled', true) and attr('disabled','disabled') and none of them disabled the date field

--2. I thought the function call only execute once at the form loading time. However, when I clicked the 'Add New Row' button, the newly added row were disabled at well.

 

Here is the code

NWF$(document).ready(function() {
var isNewMode = document.location.pathname.indexOf("/NewForm.aspx") > -1;
var isDisplayMode = document.location.pathname.indexOf("/DispForm.aspx") > -1;
var isEditMode = document.location.pathname.indexOf("/EditForm.aspx") > -1;

 

if( isEditMode)
                  disableNWFRP();
});

function disableNWFRP(){
              NWF$(".nf-RSPPolicy .nf-repeater-row:not('.nf-repeater-row-hidden')").each(function (){
                        var row = NWF$(this);
                       row.find(".nf-rs").prop('disabled', true);

                       //row.find(".nf-rs").attr('disabled','disabled')
                        row.find(".nf-repeater-deleterow-image").css('display', 'none');
               });

}

3 replies

L
Badge +6

I can disable the datepicker by the code below.

row.find(".nf-date").prop("disabled", true);
row.find(".ui-datepicker-trigger").css('display', 'none');

 

Now the problem remaining is that after I disables the old items, I cannot add new item.

I am not clear the code: row.find(".nf-date").prop("disabled", true) disables all elements in .nf-date class or it only disables the element in the current row row.

 

I only want to disable the existing rows but allow adding new items.

L
Badge +6

Now I try to manually enable the newly added last row

 

I add the 'Add new row' clicked event

NWF$(".nf-repatsectionname").find('a').click(function() {newRowClicked()});

 

It calls the function to enable the last row field and the deletion button

function newRowClicked(){

             setTimeout(function()
              {
                            NWF$('.nf-repeater-row:last').find(".nf-rs").prop("disabled", false);
                            NWF$('.nf-repeater-row:last').find(".nf-repeater-deleterow-image").css('display', 'block');
                }, 3000);
}

 

But it didn't work.

L
Badge +6

Here is the final code. 

When the form loads, the script disables all fields and all deletion buttons.

when user clicks on 'Add new row', it enables the newly (last) added row and the deletion button on that row.

 

The code targets all rows instead of the specified row. It disables all rows and enables all rows.

 

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

   var isEditMode = document.location.pathname.indexOf("/EditForm.aspx") > -1;
   if( isEditMode)
             disableNWFRP();     
    NWF$(".nf-RSPPolicy").find('a').click(function() {newRowClicked()});         
});
 
function disableNWFRP(){      
      NWF$(".nf-RSPPolicy .nf-repeater-row:not('.nf-repeater-row-hidden')").each(function ()
                 {
                         var row = NWF$(this);               
                          row.find(".nf-rs").prop("disabled", true);
                          row.find(".nf-repeater-deleterow-image").css('display', 'none');
});
}
 
function newRowClicked(){
 setTimeout(function()
    {       
NWF$('.nf-RSPPolicy:last').find(".nf-rs").prop("disabled", false);
NWF$('.nf-RSPPolicy:last').find(".nf-repeater-deleterow-image").css('display', 'block');
}, 3000);

}

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings