[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 476
  • Last Modified:

Freeze Scroll of DataGrid in Web App

I have a web app with a datagrid that has a vertical scrollbar and no pager.  Each row of the datagrid has a couple of read only text boxes and a radiobuttonlist (see attached code).  AutoPostback is set to False.  The user can scroll to any row in the datagrid and click one of the radiobuttons.  When ready, he can click a Save button.

If I set AutoPostBack to True, changes can be saved right away.  But, if the user is on one of the rows beyond what is visible upon arriving at the page, this causes the DataGrid to reset itself to the top row.  And the user has to scroll down again to get to another row not initially visible, a fact that is very annoying to the user, and makes for a bad user experience.

What code can I use to "freeze" the vertical scroll of the datagrid so that it appears to the user that nothing has happened in the background?
<asp:RadioButtonList ID="Raw_Score" Width="205px" AutoPostBack="true"  OnSelectedIndexChanged="SelectedQuestionsCnt" Font-Size="9pt" SelectedIndex='<%# DataBinder.Eval(Container, "DataItem.Raw_Score") %>'
   runat="server" RepeatDirection="Horizontal">
   <asp:ListItem Enabled="false" Value="0" Text="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"></asp:ListItem>
   <asp:ListItem Value="1" Text="&nbsp;&nbsp;&nbsp;"></asp:ListItem>
   <asp:ListItem Value="2" Text="&nbsp;&nbsp;&nbsp;"></asp:ListItem>
   <asp:ListItem Value="3" Text="&nbsp;&nbsp;&nbsp;"></asp:ListItem>
   <asp:ListItem Value="4" Text="&nbsp;&nbsp;&nbsp;"></asp:ListItem>
   <asp:ListItem Value="5" Text="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"></asp:ListItem>
   <asp:ListItem Value="6" Text=""></asp:ListItem>
</asp:RadioButtonList>

Open in new window

0
wsturdev
Asked:
wsturdev
1 Solution
 
daveamourCommented:
Hi
I answered a very simillar question to this recently and to get round this I wrote a control which inherited from Panel (which basically makes a div with a scrollbar)
Attached is my code (in C# and VB.net)
And here is the other question which you may like to read:
http://www.experts-exchange.com/Programming/Languages/.NET/Visual_CSharp/Q_24094228.html 

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
 
namespace PersistentDiv
{
    public class PersistentScrollingDiv : Panel, INamingContainer
    {
        protected HiddenField hiddenFieldScrollPosition;
 
        protected override void OnInit(EventArgs e)
        {
            hiddenFieldScrollPosition = new HiddenField();
            hiddenFieldScrollPosition.ID = "HiddenScrollValueField";
 
            this.Controls.Add(hiddenFieldScrollPosition);
            
            base.OnInit(e);
        }
 
        public PersistentScrollingDiv()
        {
            this.Load += new EventHandler(PersistentScrollingDiv_Load);
        }
 
        private void PersistentScrollingDiv_Load(object sender, EventArgs e)
        {
            MakeDivRememberScrollPosition(this);
        }
 
        private void MakeDivRememberScrollPosition(Panel panelToSet)
        {
            EnsureChildControls();
 
            //If the page isn't posted back then add the client side Javascript
            //to the onscroll event handler of the panel
            if (!Page.IsPostBack)
            {
                string onScrollCode;
 
                //Write all the onclick Javascript to update the hidden form field with the
                //div scroll position each time it scrolls
                onScrollCode = "document.getElementById('" + hiddenFieldScrollPosition.ClientID + "').value = document.getElementById('" + panelToSet.ClientID + "').scrollTop;";
 
                //Add the javascript to the scoll event handler of the panel
                panelToSet.Attributes.Add("onScroll", onScrollCode);
            }
            else
            {
                //If the page was posted back then render the client side Javascript
                //to do the scrolling after the page has loaded
                System.Text.StringBuilder javascriptScrollCode = new System.Text.StringBuilder();
 
                //The javascript uses window.setTimeout to delay the scroll code very slightly
                //400 for example will be 0.4 of a second
                javascriptScrollCode.Append("<script language=\"javascript\">\n");
                javascriptScrollCode.Append("<!--\n");
                javascriptScrollCode.Append("window.setTimeout(\"document.getElementById('" + panelToSet.ClientID + "').scrollTop = " + hiddenFieldScrollPosition.Value.ToString() + "\", 400);\n");
                javascriptScrollCode.Append("//-->\n");
                javascriptScrollCode.Append("</script>\n");
 
                //Use ClientScript to render the Javascript
                Page.ClientScript.RegisterStartupScript(typeof(Page), "StartUpScrollCode", javascriptScrollCode.ToString());
            }
        }
    }
}
 
 
Imports System 
Imports System.Data 
Imports System.Configuration 
Imports System.Web 
Imports System.Web.UI 
Imports System.Web.UI.HtmlControls 
Imports System.Web.UI.WebControls 
 
Namespace PersistentDiv 
    Public Class PersistentScrollingDiv 
        Inherits Panel 
        Implements INamingContainer 
        Protected hiddenFieldScrollPosition As HiddenField 
        
        Protected Overloads Overrides Sub OnInit(ByVal e As EventArgs) 
            hiddenFieldScrollPosition = New HiddenField() 
            hiddenFieldScrollPosition.ID = "HiddenScrollValueField" 
            
            Me.Controls.Add(hiddenFieldScrollPosition) 
            
            MyBase.OnInit(e) 
        End Sub 
        
        Public Sub New() 
            AddHandler Me.Load, AddressOf PersistentScrollingDiv_Load 
        End Sub 
        
        Private Sub PersistentScrollingDiv_Load(ByVal sender As Object, ByVal e As EventArgs) 
            MakeDivRememberScrollPosition(Me) 
        End Sub 
        
        Private Sub MakeDivRememberScrollPosition(ByVal panelToSet As Panel) 
            EnsureChildControls() 
            
            'If the page isn't posted back then add the client side Javascript 
            'to the onscroll event handler of the panel 
            If Not Page.IsPostBack Then 
                Dim onScrollCode As String 
                
                'Write all the onclick Javascript to update the hidden form field with the 
                'div scroll position each time it scrolls 
                onScrollCode = ("document.getElementById('" & hiddenFieldScrollPosition.ClientID & "').value = document.getElementById('") + panelToSet.ClientID & "').scrollTop;" 
                
                'Add the javascript to the scoll event handler of the panel 
                panelToSet.Attributes.Add("onScroll", onScrollCode) 
            Else 
                'If the page was posted back then render the client side Javascript 
                'to do the scrolling after the page has loaded 
                Dim javascriptScrollCode As New System.Text.StringBuilder() 
                
                'The javascript uses window.setTimeout to delay the scroll code very slightly 
                '400 for example will be 0.4 of a second 
                javascriptScrollCode.Append("<script language=""javascript"">" & vbLf) 
                javascriptScrollCode.Append("<!--" & vbLf) 
                javascriptScrollCode.Append(("window.setTimeout(""document.getElementById('" & panelToSet.ClientID & "').scrollTop = ") + hiddenFieldScrollPosition.Value.ToString() & """, 400);" & vbLf) 
                javascriptScrollCode.Append("//-->" & vbLf) 
                javascriptScrollCode.Append("</script>" & vbLf) 
                
                'Use ClientScript to render the Javascript 
                Page.ClientScript.RegisterStartupScript(GetType(Page), "StartUpScrollCode", javascriptScrollCode.ToString()) 
            End If 
        End Sub 
    End Class 
End Namespace 

Open in new window

0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now