Question

我在div设置中有一个RadGrid溢出auto。如果向下滚动并选择一行，div的滚动位置将重置为顶部。尝试使用内置滚动功能，但这不起作用（布局中断，只有模板单元格的背景滚动而不滚动其他元素）。尝试使JavaScript重置活动行上div的scrollTop属性已更改，但这也无效。

Answer 1

以下是使用<DIV>标签时如何处理滚动位置丢失。

添加以下功能，以便您想要控制滚动位置的所有页面都可以访问它。

 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);
    }

对于不同的DIV标签，此函数将注入一个隐藏变量，其中将在回发后保存滚动位置。当页面呈现时，相关的滚动位置将被设置回DIV标签。我正在使用这种技术来设置滚动位置。

这是在代码隐藏文件中使用此函数的方法：

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

不要担心IsPostBack条件，它是在方法本身内部处理的。上面的示例调用将在回发到页面期间保存divClientID1，divClientID2和divClientID3的滚动位置。

Answer 2

不会将名为SaveScrollPosition的标志设置为值为“true”的RadGrid工作吗？

Answer 3

找到我自己的解决方案。我创建了两个隐藏字段 - 一个维护滚动位置（ScrollPosition），另一个维护滚动容器div（ScrollingContainerID）的ID。我的RadGrid嵌入在用户控件中，所以我有一个服务器端方法来设置包含网格的div：

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

在RadGrid上，我设置了两个客户端事件：

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

然后我定义了以下客户端函数：

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;                        
}

滚动div内的Radgrid选择会重置滚动位置

3 个答案: