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

【问题标题】：Radgrid selection inside scrolling div resets scroll position滚动 div 内的 Radgrid 选择重置滚动位置
【发布时间】：2012-02-21 14:29:35
【问题描述】：

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

【问题讨论】：

为什么会滚动到顶部？是否发生了 AJAX 回发？
不，没有。看起来就像在更改网格中选择的或活动的行时，在主表上调用 scrollIntoView 函数。
内置滚动有什么问题？
@ImranRizvi 正如我所提到的，我的应用程序中的布局中断了，但最重要的是，当您滚动单元格时，子控件保持固定，而单元格本身（背景/边框/等）正常滚动
我有一个 rad 网格，它在滚动和绑定列、模板列和内部分层网格时有一个固定的标题。这对我来说很好。你想在网上看到它，这样你就可以检查它是否是你的要求？

标签： asp.net telerik radgrid

【解决方案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 的滚动位置。

【讨论】：

【解决方案2】：

将名为 SaveScrollPosition 的标志设置为值“true”对 RadGrid 不起作用吗？

【讨论】：

我认为他使用了DIV 标签来滚动网格。
@AYK 是正确的。我尝试 SaveScrollPosition 只是为了它，但它包含在一个 div 中，它是滚动的 div。
@SeanRich 为什么不尝试实施我在下面提供的答案？我相信它会为你工作。只需确保使用正确的 DIV 标签 ID 调用它即可。如果对您有用，请标记为答案。 :)
@AYK 道歉。我不得不把这个问题转移到其他问题上，我还没有回到它上面。你的回答是彻底和合理的，所以我把它标记为答案。我会在测试后报告。
@SeanRich - 感谢您的更新，但我对解决这个问题更加好奇，因为即使我也遇到过很多问题。这就是评论的原因。让我知道它对您的影响，并随时准备为您提供进一步的帮助。

【解决方案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;                        
}

【讨论】：