Question

I have a RadGrid inside a div set to overflow auto. If you scroll down and select a row the div’s scroll position gets reset to the top. Tried using built-in scroll functionality but this didn’t work (layout breaks and only background of template cells scroll without scrolling other elements). Tried JavaScript to reset scrollTop property of div on active row changed but this also didn’t work.

Answer 1

Found my own solution to this one. I created two hidden fields – one that maintains the scroll position (ScrollPosition), and another that maintains the ID of the scrolling container div (ScrollingContainerID). My RadGrid is embedded in a User Control, so I have a server-side method to set the div the grid is contained in:

public void RetainContainerScroll(HtmlGenericControl container)
{
    if (container.IsNotNull())
       ScrollingContainerID.Value = container.ClientID;
}

On the RadGrid, I set two client events:

<ClientEvents OnRowSelecting="RetainScrollPosition" OnRowClick="RestoreScrollPosition" />

Then I defined the following client-side functions:

function RetainScrollPosition(sender, eventArgs) {
   var container = GetScrollingContainer();
   if (container == null)
      return;
   SetRetainedScrollPosition(container.scrollTop);
}

function RestoreScrollPosition(sender, eventArgs) {
   var container = GetScrollingContainer();
   if (container == null)
      return;
   container.scrollTop = GetRetainedScrollPosition();
}

function GetScrollingContainer() {
   var scrollingContainerField = document.getElementById("<%= ScrollingContainerID.ClientID %>");
   if (scrollingContainerField == null)
      return null;
   var containerID = scrollingContainerField.value;
   if (containerID == null || containerID.length == 0)
      return null;
   var container = document.getElementById(containerID);
   return container;
}

function GetRetainedScrollPosition() {
   var scrollPositionField = document.getElementById("<%= ScrollPosition.ClientID %>");
   if (scrollPositionField == null)
      return 0;
   return scrollPositionField.value;
}

function SetRetainedScrollPosition(scrollPosition) {
   var scrollPositionField = document.getElementById("<%= ScrollPosition.ClientID %>");
   if (scrollPositionField == null)
      return;
   scrollPositionField.value = scrollPosition;                        
}