Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

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.
 
Suggest Edit

Published May 1, 2016 - Updated October 8, 2020

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us