Support Article
Mutilple Radio Button Selection in Grid using with pagination
Summary
The radio button on the first page stays selected after navigating between multiple pages using pagination and returning to the first page.
Error Messages
Not Applicable
Steps to Reproduce
- Configure a grid with two pages.
- Select a radio button on the first page.
- Scroll to the second page.
- Select a second radio button.
- Navigate to the first page. The first radio button is still selected.
Root Cause
The repeating grid incorrectly handles the selecting and clearing of the radio button values on the Clipboard.
When pagination occurs in the grid and a radio button is selected, the system does not deselect the previously selected row. The clearing of the radio button values is client-only and does not propagate to the Clipboard.
Resolution
Perform the following local-change:
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 the @baseclass.SetOtherRadioToFalse activity on the server with a Java step and add the following code to 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);
}
}
3. In the above Activity > Security Tab, select 'Allow direct invocation from the client or a service'.
Published April 24, 2018 - 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.