Support Article
RadioButton On Pagination Enabled Repeating Grid Not Working
Summary
When User tried to put radio button Out-of-the-box (OOTB) control (pyRadioButtonsSelectable) on a repeating grid which has pagination enabled, they see an issue where radio button is being selected multiple times on multiple pages, but only one radio is getting selected for one page.
User saved as the OOTB control (pyRadioButtonsSelectable) into their own ruleset and added the below code snippet to call the activity to clear rest of the radio buttons selected in all other different pages as per the instructions in the below PDN article.
https://pdn.pega.com/support-articles/radio-button-repeating-grid-allows-multiple-selections
added after line 46:
--------------------------------------------
<script>
function invokeReloadSection()
{
var sectionToRefresh = pega.u.d.getSectionByName("SelectRadioButton");
var activityToCall="VerifyRadioButtonMultiSelect";
pega.u.d.reloadSection(sectionToRefresh ,activityToCall,'',false,true,-1,false);
}
</script>
updated line 49 to below code snippet:
---------------------------------------------------------------------
onclick="Grids.getActiveGrid(event).setOtherRadioToFalse(this, event );invokeReloadSection();" value="true"
But, with this approach,
When user click on a radio button, for that page, the first records radio button is getting displayed as "false" , and if first row is selected it is getting displayed as "false".
Error Messages
Not Applicable
Steps to Reproduce
1. Create a repeating grid on a report definition or a data page.
2. Enable pagination with 10 records per page.
3. Save as the OOTB control pyRadioButtonsSelectable into own application ruleset, and add the code snippet as described in the above description.
4. Create an activity rule and follow the instructions as per the PDN article described in the above description.
5. Create a separate section and put the saved as control.
6. Use this section in the first column of the repeating grid and in the properties, under actions, on-click, refresh this section.
7. Run the main section rule where repeating gird is put, try to select a radio button in first page, the radio button on the first row in the repeating grid will get changed to the value "false" instead of radio button. The same happens when the user selects the first row on any page.
8. Navigate to the next page and come back, everything looks normal.
Root Cause
Whenever pagination is enabled in the repeating grid, it iterates only through that particular page and clears the other radio buttons apart from selected one and not the for the whole repeating grid.
Resolution
Perform the following local-change:
1. Create an Activity @baseclass.SetOtherRadioToFalse in server with one Java step and paste the following:
// 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);
}
}
2. Add "Show-Property" step with Property: "true" value to above (Kindly use this step also by setting the value of the property as "true" in the method parameter of the "Show-Property" method).
3. Override the setOtherRadioToFalse JS function provided by repeat grid to enhance it to call an Activity in server that maintains the radio buttons states for them. Add the following snippet in the UserWorkForm:
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>
Published September 22, 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.