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

Page is not scrolling when dragging grid item to bottom

SA-36271

Summary



User is having multiple rows in a grid which is draggable. However, when User is attempting to drag a grid item to the bottom of the list the Content Scroll does not appear and grid does not scroll down. 
Thus re-arrange of first record to last record by using drag scroll bar is not happening. 
Issue is replicable in IE and Chrome. 

Provided Local-change and not accepted by User: 
  1. The user can provide "Pixels(Fixed)" as Width of content. And select the "Fixed(pixel) size grid" and provide Width and Height values accordingly. 
  2. Give the height value such that vertical scroll bar comes. Now if you drag and drop then scroll happens. This is because the grid content has its own scroll bar. 


Error Messages



Not Applicable


Steps to Reproduce

  1. Create Grid
  2.  Add records in to the grid more than page size.
  3. Apply re arrange option in the grid.
  4. Trying to drag first record to last record.
  5. Observe the behavior, we are unable to drag first record to last record(re-arranging first one to last one)


Root Cause



A defect in Pegasystems’ code or rules. When dragged and scrolled, the correct div was not getting focused. And so the vertical scroll was not happening.

Resolution



Perform the following local-change: 

Create a non-auto generated section and paste the following JS in that. Include the non-auto generated section in the section above the grid. 

<script> 
pega.u.d.attachOnload(function() { 
if(pega.ui.grid) { 
pega.ui.grid.prototype.getScrollObj = function(obj) { 
return pega.u.d.getScrollObj(obj); 
}; 
} 

if(pega.ui.gridRowDD) { 
pega.ui.gridRowDD.prototype.adjustScrollBars = function (currentIndex, y) { 
var scrTop = this.assocTable.rows[currentIndex].offsetTop; 
this.bScrollGridUp = false; 
this.bScrollGridDown = false; 
_this = this; 
var bFixedSizeWithoutColFreeze = (!_this.gridObj.fixedCol && (_this.gridObj.gridcontDiv.style.width != "" || _this.gridObj.gridcontDiv.style.height != "")); 
var bFixedSizewithRowFreeze = (_this.gridObj.fixedRow && !_this.gridObj.fixedCol && (_this.gridObj.layoutWrapperDiv.getAttribute("noWidth") != "" || _this.gridObj.layoutWrapperDiv.getAttribute("noHeight") != "")); 
var isProgressiveLoad = (_this.gridObj.pageMode == "Progressive Load"); 
if (this.gridObj.vScrollDiv) { 
/*comes here only if freeze Panes are specified and fixSize is checked in PropertyPanel of Grid i.e. Custom scroll bar*&nbsp;
/* check if current dragOver element's offsetTop is < vertical scrollbar div's scrollTop then move scrollbar UP *&nbsp;
var scrollDivHt = this.gridObj.rightHeaderDiv ? (this.gridObj.vScrollDiv.offsetHeight - this.gridObj.rightHeaderDiv.offsetHeight) : this.gridObj.vScrollDiv.offsetHeight; 
var rowHeight = this.assocTable.rows[currentIndex].offsetHeight; 
if ((scrTop - rowHeight) < this.gridObj.vScrollDiv.scrollTop) { 
this.gridObj.vScrollDiv.scrollTop = scrTop - rowHeight; 
} else if (this.gridObj.vScrollDiv.scrollTop + scrollDivHt <= (scrTop + rowHeight)) { 

/*@@@@ increase it only by offsetheight of current dragOver elements offsetHeight @@@@ *&nbsp;
this.gridObj.vScrollDiv.scrollTop = this.gridObj.vScrollDiv.scrollTop + rowHeight; 
} 
if (_this.gridObj.vScrollDiv.scrollTop > 0 && (scrTop + this.assocTable.rows[0].offsetHeight + 10) >= this.gridObj.vScrollDiv.scrollTop && (scrTop - this.assocTable.rows[0].offsetHeight - 10) <= this.gridObj.vScrollDiv.scrollTop) { 
this.bScrollGridUp = true; 
var scrollUpID = setInterval(function () { 
_this.scrollGridUp(_this, _this.gridObj.vScrollDiv, scrollUpID, rowHeight, _this.gridObj.vScrollCont); 
}, 10); 
} 
if ((_this.gridObj.vScrollDiv.scrollTop + _this.gridObj.vScrollDiv.offsetHeight < _this.gridObj.vScrollCont.offsetHeight) && (scrTop + rowHeight + 20 >= this.gridObj.vScrollDiv.scrollTop + scrollDivHt - this.assocTable.rows[0].offsetHeight) && (scrTop + rowHeight - 20 <= this.gridObj.vScrollDiv.scrollTop + scrollDivHt - this.assocTable.rows[0].offsetHeight)) { 
this.bScrollGridDown = true; 
var scrollDownID = setInterval(function () { 
_this.scrollGridDown(_this, _this.gridObj.vScrollDiv, scrollDownID, rowHeight, _this.gridObj.vScrollCont); 
}, 10); 
} 
} else if (bFixedSizeWithoutColFreeze || isProgressiveLoad || bFixedSizewithRowFreeze) { 
/*comes here only if fixSize is checked in PropertyPanel of Grid without freeze panes i.e. scroll is given to gridContent div -- NO Custom Scroll bar*&nbsp;
/* check if current dragOver element's offsetTop is < vertical scrollbar div's scrollTop then move scrollbar UP *&nbsp;
if (_this.gridObj.fixedRow) { //If either Fixed Size with Row Freeze or Progressive Load. 
var divTobeScrolled = this.gridObj.layoutWrapperDiv; 
var scrollDivHt = divTobeScrolled ? (divTobeScrolled.offsetHeight) : this.gridObj.gridcontDiv.offsetHeight; 
} 
else { 
var divTobeScrolled = this.gridObj.gridcontDiv; 
var scrollDivHt = this.gridObj.rightHeaderDiv ? (divTobeScrolled.offsetHeight - this.gridObj.rightHeaderDiv.offsetHeight) : divTobeScrolled.offsetHeight; 
} 
var rowHeight = this.assocTable.rows[currentIndex].offsetHeight; 
var topBufferHeight = 0; 

if (_this.gridObj.bDiscardInvisibleRows) {/* TASK-127357 *&nbsp;
if (_this.gridObj.topBuffer.style.height != "auto") { // BUG-86957 
topBufferHeight = _this.gridObj.topBuffer.offsetHeight; 
} 
scrTop += topBufferHeight; 
} 
if ((scrTop - rowHeight) < divTobeScrolled.scrollTop) { 
if (_this.gridObj.bDiscardInvisibleRows) {/* TASK-127357 *&nbsp;
if (topBufferHeight <= (scrTop - rowHeight)) { 
divTobeScrolled.scrollTop = scrTop - rowHeight; 
} 
} else { 
divTobeScrolled.scrollTop = scrTop - rowHeight; 
} 

} else if (divTobeScrolled.scrollTop + scrollDivHt <= (scrTop + rowHeight)) { 
divTobeScrolled.scrollTop = divTobeScrolled.scrollTop + rowHeight; 
} 
if (divTobeScrolled.scrollTop > 0 && (scrTop + this.assocTable.rows[0].offsetHeight + 10) >= divTobeScrolled.scrollTop && (scrTop - this.assocTable.rows[0].offsetHeight - 10) <= divTobeScrolled.scrollTop) { 
this.bScrollGridUp = true; 
var scrollUpID = setInterval(function () { 
_this.scrollGridUp(_this, divTobeScrolled, scrollUpID, rowHeight, _this.gridObj.gridcontDiv); 
}, 10); 
} 
if ((divTobeScrolled.scrollTop + divTobeScrolled.offsetHeight < divTobeScrolled.scrollHeight) && (scrTop + rowHeight + 20 >= divTobeScrolled.scrollTop + scrollDivHt - this.assocTable.rows[0].offsetHeight) && (scrTop + rowHeight - 20 <= divTobeScrolled.scrollTop + scrollDivHt - this.assocTable.rows[0].offsetHeight)) { 
this.bScrollGridDown = true; 
var scrollDownID = setInterval(function () { 
_this.scrollGridDown(_this, divTobeScrolled, scrollDownID, rowHeight, _this.gridObj.gridcontDiv, true); 
}, 10); 
} 
} else { 
/* if block is entered in all cases other than Fixed button bar doesnt *&nbsp;
if (!this.gridObj.scrollObjInfo) { 
this.gridObj.scrollObjInfo = this.gridObj.getScrollObj(this.gridObj.gridDiv); 
} 
var scrollObj = this.gridObj.scrollObjInfo[0]; 
var abs_top = this.gridObj.scrollObjInfo[2]; 
var rowHeight = this.assocTable.rows[currentIndex].offsetHeight; 
if (scrollObj.tagName == "BODY" || (scrollObj.id != null && scrollObj.id != "HARNESS_CONTENT")) { 
/* SCROLLDOWN only if y position is greater than offsetHeight+ scrollTop of body/div 
SCROLLUP only if y position is less than body's scrollTop *&nbsp;
var yPos = y + rowHeight + abs_top; 
if (yPos > $(scrollObj).offset().top + scrollObj.offsetHeight) { 
scrollObj.scrollTop = scrollObj.scrollTop + rowHeight; 
} 
else if (y < ($(scrollObj).offset().top + rowHeight)) { 
scrollObj.scrollTop = scrollObj.scrollTop - rowHeight; 
} 
if (scrollObj.scrollTop > 0 && this.assocTable.rows[currentIndex].offsetTop + this.assocTable.rows[0].offsetHeight >= scrollObj.scrollTop && this.assocTable.rows[currentIndex].offsetTop - this.assocTable.rows[0].offsetHeight <= scrollObj.scrollTop) { 
this.bScrollGridUp = true; 
var scrollUpID = setInterval(function () { 
_this.scrollGridUp(_this, scrollObj, scrollUpID, rowHeight, _this.gridObj.gridDiv); 
}, 10); 

} 
if (scrollObj.scrollTop + scrollObj.offsetHeight < _this.gridObj.gridDiv.offsetHeight && yPos >= scrollObj.scrollTop + scrollObj.offsetHeight - 20 && yPos <= scrollObj.scrollTop + scrollObj.offsetHeight + 20) { 
this.bScrollGridDown = true; 
var scrollDownID = setInterval(function () { 
_this.scrollGridDown(_this, scrollObj, scrollDownID, rowHeight, _this.gridObj.gridDiv); 
}, 10); 
} 
} else { 
/*harness has fixed button bar *&nbsp;
/* SCROLLDOWN only if y position is greater than offsetHeight of div which has scrollbar 
SCROLLUP only if y position is less than div's scrollTop *&nbsp;
if (y + rowHeight > scrollObj.offsetHeight) { 
scrollObj.scrollTop = scrollObj.scrollTop + rowHeight; 
} 
else if (y + scrollObj.scrollTop < (scrollObj.scrollTop + rowHeight)) { 
scrollObj.scrollTop = scrollObj.scrollTop - rowHeight; 
} 
if (scrollObj.scrollTop > 0 && (y - rowHeight <= 0)) { 
this.bScrollGridUp = true; 
var scrollUpID = setInterval(function () { 
_this.scrollGridUp(_this, scrollObj, scrollUpID, rowHeight, _this.gridObj.gridDiv); 
}, 10); 
} 
if (y + rowHeight >= scrollObj.offsetHeight && y <= scrollObj.offsetHeight) { 
this.bScrollGridDown = true; 
var scrollDownID = setInterval(function () { 
_this.scrollGridDown(_this, scrollObj, scrollDownID, rowHeight, _this.gridObj.gridDiv); 
}, 10); 
} 
} 
} 
}; 
} 
}, true); 
</script>


 

 

Tags:

Pega Platform Pega Platform 7.2.2 User Experience

Published April 24, 2017 - Updated October 8, 2020

Was this useful?

100% found this useful

Have a question? Get answers now.

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

Visit the Collaboration Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

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