Support Article
Two radio buttons selected at the same time for paged grid
Summary
In the grid layout there is a radio button for each row added.
When there are two pages of records in the grid (Pagination), the user can select two radio buttons at the same time.
Previously selected radio button is not getting unselected when user clicks on new radio button.
Error Messages
Not Applicable
Steps to Reproduce
1. Configure grid with two pages.
2. Select a radio button on first page.
3. Scroll to second page.
4. Select a second radio button.
5. Scroll back to first page.
6. Observe that the first button is still selected.
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:
- 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);
}
}
3. In the Above Activity > Security Tab, check Allow direct invocation from the client or a service.
Published September 27, 2017 - 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.