Support Article
Clicking on a record in Repeat grid, Focus is moving to top
SA-22448
Summary
While clicking on a record in Repeat grid and focus is moving to top.
In Repeat grid, where for each row user shows a big section which has multiple collapsible sub sections.
If user try to expand or Collapse any subsections in a grid or click anywhere down in that big section, focus is moving to top of the record. This is causing user to scroll down again to see the details of the section which is expanded.
Error Messages
Not Applicable.
Steps to Reproduce
1. Create a section with Repeat Grid.
2. For row field, drag a section which is quite big in size, and also which has multiple sub sections embedded.
3. Expand any one of the repeat grid record.
4. Scroll to the end of the expended record and then click on it.
Root Cause
User’s application was carried over from PRPC 5.5 which contained old repeat grid.
Resolution
Perform the following local-change:
1. Create a non-auto generated section.
2. Put the below code in the section created in above step:
<script>
$(document).ready(function(){
if(pega && pega.u && pega.u.grid && pega.u.grid.prototype){
pega.u.grid.prototype.focusFirstElement = function(){};
pega.u.grid.prototype.setActiveRow = function(e, tbl, index, preventUnhighlighting) {
if(e){
if(!index)
var rowIndex = this.getPageIndex(e,tbl);
else
var rowIndex = index;
var gridDiv = pega.util.Event.getTarget(e);
if(!this.isElementFromSameGridContDiv(gridDiv)) {
return;
}
}
try{
if(!index)
var pageIndex = this.getPageIndex(e,tbl);
else
var pageIndex = index;
/*Return on click of group by row header*/
if(this.bCategorizedGrid) {
if(this.rightBodyTbl.rows[pageIndex] && !this.rightBodyTbl.rows[pageIndex].id) {
return;
}
}
/*Hover class name is removed */
if(this.bRowHovering){
var row = this.rightBodyTbl.rows[pageIndex];
if(row && row.getAttribute("expanded") == "true"){
row = row.previousSibling;
while(row.nodeType!=1)
row = row.previousSibling;
}
this.onCellHover(row, false);
}
if(this.editConfig==this.EDIT_EXPANDPANE) {
var row = this.rightBodyTbl.rows[pageIndex];
if(!row.id) {
pageIndex = pageIndex-1;
}
}
if( (this.repeatType == this.ROW_REPEAT && (pageIndex == 0 || pageIndex == -1 || (this.bGrid && pageIndex > this.getTableLength(this.rightBodyTbl)) || (!this.bGrid && pageIndex > this.getTableLength(this.rightBodyTbl))))
||(this.repeatType == this.COL_REPEAT && (pageIndex[0] == 0 || pageIndex[0] == -1 || pageIndex[0] == tbl.rows[0].cells.length-1)) ) {
return;
}
if(this.activeRow && this.activeRow != -1 && this.getIndex(this.activeRow) != pageIndex) {
if(this.repeatType == this.ROW_REPEAT){
if (!preventUnhighlighting) {
this.selectRow(this.activeRow, false);
}
if(this.getLeftRow()){
Dom.getFirstChild(this.getLeftRow()).removeAttribute("tabIndex");
}
}else{
this.selectCol(this.activeRow, false);
}
}
if(this.getIndex(this.activeRow) == pageIndex) {
/*this.getLeftRow().focus();*/
if(e) {
var srcElem = Event.getTarget(e);
var sNodeName = srcElem.nodeName.toUpperCase();
if (sNodeName != "A" && sNodeName != "BUTTON" && sNodeName != "SELECT" && sNodeName != "OPTION" && sNodeName != "INPUT" && sNodeName != "TEXTAREA" && sNodeName != "IMG"&& !this.isDatePicker(srcElem)) {
/*
* BUG-132517 : Determine if the event's source element can be focussed or not due to
* a non-negative tabIndex value. If the event's source element has a tabIndex >= 0
* then grid row's first child should not pull the focus.
* Hence execute the grid row cell focussing logic only if the event's source element has a tabIndex < 0.
*/
var srcElemTabIndex = srcElem.getAttribute("tabIndex");
if(srcElemTabIndex && !isNaN(srcElemTabIndex)) {
srcElemTabIndex = parseInt(srcElemTabIndex);
}
else {
srcElemTabIndex = -1;
}
if(srcElemTabIndex < 0){
/*target element on click of dropdown comes as option instead of select in case of firefox. So checking for option as well*/
/* preventing focus event on grid row to happen when target is inside the expand pane flow action */
if (this.editConfig == this.EDIT_EXPANDPANE && this.getRightRow().getAttribute("rowExpanded") == "true") {
var detailsDiv = Dom.getElementsById("rowDetail" + this.getLeftRow().id, this.gridDiv)[0];
if (detailsDiv && Dom.isAncestor(detailsDiv, srcElem)) {
return;
}
}
/* Dom.getFirstChild(this.getLeftRow()).focus(); */
/* this.focusElem = null; */
/* this.focusOnNewEditableRow(); */
}
}
}
return;
}
if(this.editConfig==this.EDIT_EXPANDPANE || this.bCategorizedGrid) {
if(!this.bPageGroup) {
var row = this.rightBodyTbl.rows[pageIndex];
if(row && row.id) {
pageIndex = (this.bFilteredGrid)?this.getFilteredRowIndex(pageIndex):row.getAttribute("PL_INDEX");
if( this.pageMode != "Progressive Load" &&
this.currentPageIndex && this.currentPageIndex!="" && this.pyPaginateActivity=="" && !this.bReportDefinition && parseInt(pageIndex) > parseInt(this.rangeSize)) {
pageIndex = pageIndex-((this.currentPageIndex-1)*this.rangeSize);
} else if (this.bDiscardInvisibleRows && this.currentPageIndex && this.currentPageIndex!="") {
pageIndex = this.getActiveRowIndexFromRowIndex(row.rowIndex);
}
}
}else {
pageIndex = this.getPGRowIndex(pageIndex);
}
}
this.activeRow = pageIndex;
/*update the tabindex of the row to "0" while updating the activeRow*/
/*this.getLeftRow().tabIndex="0";*/
/*this.getLeftRow().focus();*/
}catch(e){}
};
}
});
</script>
3. Include this section, in the section where issue is faced.
User must refresh the browser preferably pressing CTRL+F5.
Published May 1, 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.