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.
In previous articles i explained How to maintain scroll position of html div on postback in asp.net using jquery and Bind gridview from sql server database using Jquery and json in asp.net and Bind, save, edit, update, cancel, delete, paging example in gridview and Bind and implement custom paging in asp.net datalist control in 3 different ways and Ajax accordion example to create vertical dropdown menu
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.
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..