Please disable your adblock and script blockers to view this page
 

Maintain scroll position of Gridview/Repeater inside Div/Panel using jquery on postback in Asp.Net AJAX UpdatePanel

Introduction: In this article I am going to explain how to retain scroll position of scrollable Gridview or Repeater placed inside Asp.Net Panel control or HTML Div on occurrence of partial postback inside AJAX UpdatePanel using jQuery.
Maintain scroll position of GridviewRepeater inside DivPanel using jquery on postback in Asp.Net AJAX UpdatePanel

Description: Sometimes, it is required to show all items in Gridview or repeater but we don’t want to implement paging. In this case, a scrolling grid is more applicable and enclosing the GridView in a Panel control or <div> tag with the overflow style applied ensures that the over-sized element is clipped and that scroll bars are displayed.

This solution works fine but whenever a postback occurs on page the div gets back to its original starting position. Here in this example, In order to maintain the scrolled position after postback I stored the div scroll value in hiddenfield using jquery and after postback we can get the scroll value from hiddenfield and set back to div to maintain the scroll position after asynchronous postback.

Implementation: Let’s create a sample page from demonstration purpose.

HTML Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .divcss {
            overflow-y: scroll;
            height: 200px;
            width: 400px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
    <script type="text/javascript">   
        $(document).ready(function () {
            maintainScrollPosition();
        });
        function pageLoad() {
            maintainScrollPosition();
        }
        function maintainScrollPosition() {
            $("#dvScroll").scrollTop($('#<%=hfScrollPosition.ClientID%>').val());
        }   
        function setScrollPosition(scrollValue) {
            $('#<%=hfScrollPosition.ClientID%>').val(scrollValue);
        }               
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset style="height: 250px; width: 410px;">
                        <legend>Maintain scroll position of Gridview inside div on postback</legend>
                        <asp:HiddenField ID="hfScrollPosition" Value="0" runat="server" />

                        <div id="dvScroll" class="divcss" onscroll="setScrollPosition(this.scrollTop);">
                            <asp:GridView ID="grdEmployeeDetails" runat="server" Style="width: 100%" AutoGenerateColumns="false"
                                OnSelectedIndexChanged="grdEmployeeDetails_SelectedIndexChanged" CellPadding="4" ForeColor="#333333" GridLines="None">
                                <AlternatingRowStyle BackColor="White" />
                                <HeaderStyle BackColor="#507C7D1" HorizontalAlign="Left" Font-Bold="True" ForeColor="White"></HeaderStyle>
                                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                                <RowStyle BackColor="#EFF3FB" />
                                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                                <Columns>
                                    <asp:BoundField DataField="EmployeeName" HeaderText="Employee Name" />
                                    <asp:BoundField DataField="EmployeeCode" HeaderText="Employee Code" />
                                    <asp:ButtonField CommandName="Select" Text="Select" />
                                </Columns>
                            </asp:GridView>
                        </div>

                        <div style="padding-top: 20px;">
                            <asp:Literal ID="ltrlEmp" runat="server"></asp:Literal>
                        </div>
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Note: I have wrapped GridView in a DIV tag. If you want to wrap gridview or repeater inside asp.net panel control instead of div then place gridview inside
<asp:Panel ID="dvScroll" runat="server" CssClass="divcss" onscroll="setScrollPosition(this.scrollTop);">
</asp:Panel>
Instead of
 <div id="dvScroll" class="divcss" onscroll="setScrollPosition(this.scrollTop);">
 </div>

Asp.Net C# Code
using System.Data;
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
    protected void BindGridview()
    {
        DataTable dt = new DataTable();
        //Add Columns to datatable
        dt.Columns.Add("EmployeeId", typeof(Int32));
        dt.Columns.Add("EmployeeName", typeof(string));
        dt.Columns.Add("EmployeeCode", typeof(string));
        //Adding rows and data
        dt.Rows.Add(1, "Ajay", "EMP0001");
        dt.Rows.Add(2, "Irfan", " EMP0002");
        dt.Rows.Add(3, "Hrithik", " EMP0003");
        dt.Rows.Add(4, "Ranbir", " EMP0004");
        dt.Rows.Add(5, "Salman", " EMP0005");
        dt.Rows.Add(6, "Aamir", " EMP0006");
        dt.Rows.Add(7, "Akshay", " EMP0007");
        dt.Rows.Add(8, "Vinay", " EMP0008");
        dt.Rows.Add(9, "Ankuj", " EMP0009");
        dt.Rows.Add(10, "Swati", " EMP0010");
        dt.Rows.Add(11, "Nisha", " EMP0011");
        dt.Rows.Add(12, "Rimmi", " EMP0012");
        //Bind datatable to gridview
        grdEmployeeDetails.DataSource = dt;
        grdEmployeeDetails.DataBind();
    }

    protected void grdEmployeeDetails_SelectedIndexChanged(object sender, EventArgs e)
    {       
        string name = grdEmployeeDetails.SelectedRow.Cells[0].Text;
        string code = grdEmployeeDetails.SelectedRow.Cells[1].Text;
        ltrlEmp.Text = String.Concat("Selected Employee: ", name, '(', code, ')');
    }


Asp.Net VB Code
Imports System.Data
  Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindGridview()
        End If
    End Sub

    Protected Sub BindGridview()
        Dim dt As New DataTable()
        'Add Columns to datatable
        dt.Columns.Add("EmployeeId", GetType(Int32))
        dt.Columns.Add("EmployeeName", GetType(String))
        dt.Columns.Add("EmployeeCode", GetType(String))
        'Adding rows and data
        dt.Rows.Add(1, "Ajay", "EMP0001")
        dt.Rows.Add(2, "Irfan", " EMP0002")
        dt.Rows.Add(3, "Hrithik", " EMP0003")
        dt.Rows.Add(4, "Ranbir", " EMP0004")
        dt.Rows.Add(5, "Salman", " EMP0005")
        dt.Rows.Add(6, "Aamir", " EMP0006")
        dt.Rows.Add(7, "Akshay", " EMP0007")
        dt.Rows.Add(8, "Vinay", " EMP0008")
        dt.Rows.Add(9, "Ankuj", " EMP0009")
        dt.Rows.Add(10, "Swati", " EMP0010")
        dt.Rows.Add(11, "Nisha", " EMP0011")
        dt.Rows.Add(12, "Rimmi", " EMP0012")
        'Bind datatable to gridview
        grdEmployeeDetails.DataSource = dt
        grdEmployeeDetails.DataBind()
    End Sub

    Protected Sub grdEmployeeDetails_SelectedIndexChanged(sender As Object, e As EventArgs)
        Dim name As String = grdEmployeeDetails.SelectedRow.Cells(0).Text
        Dim code As String = grdEmployeeDetails.SelectedRow.Cells(1).Text
        ltrlEmp.Text = [String].Concat("Selected Employee: ", name, "("c, code, ")"c)
    End Sub

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily.. ConversionConversion EmoticonEmoticon