2

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.

5
  • Why would it scroll back to the top? Is there an AJAX postback happening?
    – msigman
    Apr 6, 2012 at 3:20
  • No there aren't. It's looks like that on changing selcted or active row in a grid, scrollIntoView function called on a master table. Apr 6, 2012 at 8:43
  • what is the problem with inbuilt scrolling? Apr 8, 2012 at 18:18
  • @ImranRizvi As I mentioned, the layout in my app breaks, but most importantly, when you scroll the cells' child controls remain fixed while the cells themselves (the backgrounds/borders/etc) scroll normally
    – Sean Rich
    Apr 9, 2012 at 1:37
  • I had a rad grid that has a fixed header while scrolling and bound column, template column and hierarical grid inside . This works fine for me. Do you want to see it online so that you can check if it is your rquirement? Apr 9, 2012 at 12:58

3 Answers 3

1

Here is how to handle the scroll position loss when using <DIV> tags.

Add the following function, so that it is accessible to all your pages where you want to control scroll positions.

 protected void RetainScroll(string ids, bool isPostBack)
    {
        if (String.IsNullOrEmpty(ids))
            return;
        //register js method on page load event to set the previous scroll position.
        ScriptManager.RegisterStartupScript(this, Page.GetType(), "scroll", "javascript:RSSetScroll();", true);

        if (isPostBack)
        {
            //just register startup call and return
            return;
        }
        string[] allDivs = ids.Split(new char[] { ',' });
        if (allDivs.Length <= 0)
            return;
        //construct the js functions
        StringBuilder setScroll = new StringBuilder(512);
        StringBuilder onScroll = new StringBuilder(512);
        setScroll.Append("function RSSetScroll(){");
        onScroll.Append("function RSOnScroll(tdiv, hvar) {");
        foreach (string div in allDivs)
        {
            string hVar = div + "__h";
            Page.RegisterHiddenField(hVar, "0:0");

            setScroll.Append("if(document.getElementById('" + div + "')!=null) document.getElementById('" + div + "').scrollTop = 0;");
            setScroll.Append("if(document.getElementById('" + div + "')!=null) document.getElementById('" + div + "').scrollLeft = 0;");
            setScroll.Append("if(document.getElementById('" + div + "')!=null) document.getElementById('" + div + "').scrollTop = document.getElementById('" + hVar + "').value.split(':',2)[0];");
            setScroll.Append("if(document.getElementById('" + div + "')!=null) document.getElementById('" + div + "').scrollLeft = document.getElementById('" + hVar + "').value.split(':',2)[1];");

            Control ctrl = Page.FindControl(div);
            if (ctrl != null)
                if (ctrl.GetType() == typeof(HtmlGenericControl))
                {
                    ((HtmlGenericControl)(ctrl)).Attributes.Add("onscroll", "javascript:RSOnScroll(this,'" + hVar + "')");
                }

        }
        setScroll.Append("}");
        onScroll.Append("document.getElementById(hvar).value = tdiv.scrollTop +':'+tdiv.scrollLeft;");
        onScroll.Append("}");
        //insert js functions to page
        ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "RC", setScroll.ToString() + onScroll.ToString(), true);
    }

This function will inject a hidden variable, to which scroll positions will be saved on post backs, for different DIV tags. When the page renders, relevant scroll positions will be set back to DIV tags. I am using this technique to set scroll positions.

This is how you use this function in your code behind file :

protected void Page_Load(object sender, EventArgs e)
{
    RetainScroll("divClientID1,divClientID2,divClientID3", IsPostBack);
}

Don't worry about the IsPostBack condition, it is handled inside the method itself. The sample call above will save scroll positions for divClientID1, divClientID2 and divClientID3 during postbacks to the page.

0

Won't setting flag called SaveScrollPosition to value "true" work for RadGrid?

6
  • I think he has used DIV tag for scrolling the grid.
    – AYK
    Apr 12, 2012 at 8:22
  • 1
    @AYK is correct. I tried SaveScrollPosition just for the heck of it, but it's contained in a div and it's the div that is scrolling.
    – Sean Rich
    Apr 12, 2012 at 11:33
  • @SeanRich Why don't you try implementing my answer provided below ? I am sure it will work for you. Just make sure that you call it with proper DIV tag ids. Mark as answer if it works for you. :)
    – AYK
    Apr 12, 2012 at 12:17
  • @AYK Apologies. I had to move past this problem to other issues, and I haven't gotten back to it. You're answer is thorough and reasonable so I've marked it as the answer. I'll report back once I've tested it.
    – Sean Rich
    Apr 12, 2012 at 17:23
  • @SeanRich - Thanks for the update, but I am more curious about resolving this problem, because even I had faced many issues with this. That is why commented. Let me know how it goes for you and would be always ready to help you further.
    – AYK
    Apr 13, 2012 at 1:41
-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;                        
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.