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

Question

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

Answer 1

以下是使用

标签时如何处理滚动位置丢失。

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

 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 的 ID (ScrollingContainerID)。我的 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;                        
}