Support Article
User is able to select multiple radio buttons in pagination
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
- Create a repeating grid with a page list as its source.
- 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.
- 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>
- 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 December 2, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.