Support Article

User is able to select multiple radio buttons in pagination

SA-29571

Summary



Users can select multiple radio buttons on different pages of a repeating grid. This is not expected behavior. Radio buttons are used to select one record, not multiple records.

On the first page of a repeating grid, a user selects one radio button (that is, one record). Then the user uses pagination to navigate to the second, third, and other pages. When the user selects a radio button on one of the subsequent pages and goes back to the first page, the radio button on the first page is still selected. The selection of the last radio button on a subsequent page should have overridden the selection of the radio button on the first page.


Error Messages



Not Applicable


Steps to Reproduce

  1. Create a repeating grid with a page list as its source.
  2. Specify radio button as the UI control.
    When users work with the repeating grid, they are able to select more than one radio button on different pages.


Root Cause



The repeating grid does not correctly handle the selecting and clearing of radio button values on the clipboard. When pagination occurs in the grid and a subsequent radio button is selected, the system does not know that it has to deselect the previously selected row. The clearing of radio buttons is client-only and does not propagate to the clipboard.

Resolution



Perform the following local-change:
Override the setOtherRadioToFalse JavaScript (JS) function provided by the repeating grid to enhance it and call an activity in the server that maintains the radio buttons states.
  1. Include the following snippet in the UserWorkForm:

    <script>
    pega.u.d.attachOnload(function() {
    if (pega.ui && pega.ui.grid) {
    pega.ui.grid.prototype.setOtherRadioToFalse = function(element, event) {
    var currentName = element.name;
    if (typeof(element.id) == "undefined" || element.id == "")
    element.id = currentName.replace(/[\d]/g, "");
    var radioButtonsList = pega.util.Dom.getElementsById(element.id, this.gridDiv);
    var len = radioButtonsList.length;
    for (var i = 0; i < len; i++) {

    if (radioButtonsList[i]) {
    if (radioButtonsList[i].name != currentName) {
    radioButtonsList[i].checked = false;
    }
    }
    }
    var currentRowRef = pega.ui.property.toReference(element.name);
    // console.log(currentRowRef);

    var activityUrl = SafeURL_createFromURL(pega.u.d.url);
    activityUrl.put("pyActivity", "@baseclass.SetOtherRadioToFalse");
    activityUrl.put("propRef", currentRowRef);

    pega.u.d.asyncRequest("POST", activityUrl);
    };
    }
    }, true);

    </script>

     
  2. Create an activity @baseclass.SetOtherRadioToFalse on the server with one Java step and paste the following code into the step:

String propertyReference = tools.getParamValue("propRef"); 

// Get the property name 
String propertyName = propertyReference.substring(propertyReference.lastIndexOf('.') + 1); 

// Get the page list name 
String rowPageRef = propertyReference.substring(0, propertyReference.lastIndexOf('.')); 
String pageListRef = rowPageRef.substring(0, propertyReference.lastIndexOf('(')); 
int rowNumber = Integer.parseInt(rowPageRef.substring(propertyReference.lastIndexOf('(') + 1, propertyReference.lastIndexOf(')'))); 

// oLog.error(pageListRef + " | " + rowNumber + " | " + propertyName); 
Iterator plIterator = tools.getProperty(pageListRef).iterator(); 
while(plIterator.hasNext()) { 
ClipboardPage rowPage = ((ClipboardProperty) plIterator.next()).getPageValue(); 

if (rowPage.getReference().equals(rowPageRef)) { 
rowPage.getProperty(propertyName).setValue(true); 
} else { 
rowPage.getProperty(propertyName).setValue(false); 

}

Related Content
SA-27900 for Pega 7.1.7, https://pdn.pega.com/support-articles/radio-button-selection-does-not-work-across-pages.

 

Published October 25, 2016 - Updated December 2, 2016


100% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.