Maintain a scrollable gridview position on postback inside update panel
Question
I have a gridview with overflow-y:auto. The gridview is inside an update panel which is wrapped in a user control. This usercontrol is displayed using the ajax modal pop up extender. Now, this gridview could have hundreds of items, if a user would have to select an item, then the async postback reloads the popup again and the scroll position is lost. I tried with the solution posted on the link http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx as well but no luck. Not sure if I am misplacing the javascript code.
This is where I have the modal pop up extender.
<asp:Panel ID="pnlShowDirectMailMedium" runat="server" Visible="false" HorizontalAlign="Center">
<uc2:DirectMailMedium ID="ucDirectMailMedium" runat="server" OnCloseEvent="ucDirectMailMedium_CloseEvent" />
<asp:HiddenField ID="hfCloseDMMedium" runat="server" />
</asp:Panel>
<cc1:ModalPopupExtender ID="mpeDirectMailMedium" runat="server" BackgroundCssClass="Modal"
TargetControlID="hfCloseDMMedium" PopupControlID="pnlShowDirectMailMedium" OkControlID="hfCloseDMMedium"
CancelControlID="hfCloseDMMedium" Drag="true" RepositionMode="None" />
This is the actual user control where i have the gridview.
<asp:Panel ID="pnlDirectMail" runat="server">
<asp:UpdatePanel ID="upDirectMail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="ZipCodeGrid" id="divGrid">
<asp:GridView ID="gvZips" runat="server" AutoGenerateColumns="false" OnRowDataBound="gvZips_RowDataBound"
GridLines="None" Width="870px">
<Columns>
<asp:TemplateField HeaderText="Zip">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:HiddenField ID="hfSelectedId" runat="server" Value='<%# Bind("SelectedId") %>' />
<asp:HiddenField ID="hfID" runat="server" Value='<%# Bind("ID") %>' />
<asp:Label ID="lblZip" runat="server" Text='<%# Bind("Zip") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lblDescription" runat="server" Text="City" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtDescription" runat="server" Text='<%# Bind("Description") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lblSegmentDescHeader" runat="server" Text="Segment" Visible="false" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblSegment" runat="server" Text='<%# Bind("SegmentDesc") %>' Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lbl1Acre50KHeader" runat="server" Text="1 Acre (50K)" Visible="false" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl1Acre50KQty" runat="server" Text='<%# Bind("One50K") %>' Width="50px"
Visible="false" />
<asp:CheckBox ID="chk1Acre50K" runat="server" Checked='<%# Bind("One50KSelected") %>'
OnCheckedChanged="chk1Acre50K_CheckChanged" AutoPostBack="true" Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lbl1Acre50KPriceHeader" runat="server" Text="Cost" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl1Acre50KCost" runat="server" Text='<%# Bind("One50KCost", "{0:$###,###,##0.00}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lbl1Acre100KHeader" runat="server" Text="1 Acre (100K)" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl1Acre100KQty" runat="server" Text='<%# Bind("One100K") %>' Width="50px"
Visible="false" />
<asp:CheckBox ID="chk1Acre100K" runat="server" Checked='<%# Bind("One100KSelected") %>'
OnCheckedChanged="chk1Acre100K_CheckChanged" AutoPostBack="true" Visible="false" />
<asp:HiddenField ID="hf1Acre100KCost" runat="server" Value='<%# Bind("One100KCost", "{0:$###,###,##0.00}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lbl2Acre50KHeader" runat="server" Text="Prospect 2Acre+" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl2Acre50KQty" runat="server" Text='<%# Bind("Two50K") %>' Width="50px" />
<asp:CheckBox ID="chk2Acre50K" runat="server" Checked='<%# Bind("Two50KSelected") %>'
OnCheckedChanged="chk2Acre50K_CheckChanged" AutoPostBack="true" />
<asp:HiddenField ID="hf2Acre50KPrice" runat="server" Value='<%# Bind("Two50KCost", "{0:$###,###,##0.00}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lbl2Acre100KHeader" runat="server" Text="Prospect 3Acre+" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl2Acre100KQty" runat="server" Text='<%# Bind("Two100K") %>' Width="50px" />
<asp:CheckBox ID="chk2Acre100K" runat="server" Checked='<%# Bind("Two100KSelected") %>'
OnCheckedChanged="chk2Acre100K_CheckChanged" AutoPostBack="true" />
<asp:HiddenField ID="hf2Acre100KPrice" runat="server" Value='<%# Bind("Two100KCost", "{0:$###,###,##0.00}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lbl3Acre50KHeader" runat="server" Text="3 Acre (50K)" Visible="false" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl3Acre50KQty" runat="server" Text='<%# Bind("Three50K") %>' Visible="false"
Width="50px" />
<asp:CheckBox ID="chk3Acre50K" runat="server" Checked='<%# Bind("Three50KSelected") %>'
OnCheckedChanged="chk3Acre50K_CheckChanged" AutoPostBack="true" Visible="false" />
<asp:HiddenField ID="hf3Acre50KPrice" runat="server" Value='<%# Bind("Three50KCost", "{0:$###,###,##0.00}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lbl3Acre100KHeader" runat="server" Text="3 Acre (100K)" Visible="false" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl3Acre100KQty" runat="server" Text='<%# Bind("Three100K") %>' Width="50px"
Visible="false" />
<asp:CheckBox ID="chk3Acre100K" runat="server" Checked='<%# Bind("Three100KSelected") %>'
OnCheckedChanged="chk3Acre100K_CheckChanged" AutoPostBack="true" Visible="false" />
<asp:HiddenField ID="hf3Acre100KPrice" runat="server" Value='<%# Bind("Three100KCost", "{0:$###,###,##0.00}") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:LinkButton ID="lblOccupiedHousingUnit" runat="server" Text="Housing Unit" Visible="false"
ForeColor="White" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtOccupiedHousingUnit" runat="server" Text='<%# Bind("OccupiedHousingUnit") %>'
Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:LinkButton ID="lblHouseholdIncome" runat="server" Text="Household Income" Visible="false"
ForeColor="White" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtHouseholdIncome" runat="server" Text='<%# Bind("HouseholdIncome", "{0:$###,###,##0.00}") %>'
Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:LinkButton ID="lblDistancetoSite" runat="server" Text="Distance" Visible="false"
ForeColor="White" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtDistancetoSite" runat="server" Text='<%# Bind("DistancetoSite") %>'
Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:LinkButton ID="lblAverageIncome" runat="server" Text="Home Value" Visible="false"
ForeColor="White" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtAverageIncome" runat="server" Text='<%# Bind("AverageIncome", "{0:$###,###,##0.00}") %>'
Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lblRuralPct" runat="server" Text="% Rural" Visible="false" ForeColor="White" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtRuralPct" runat="server" Text='<%# Bind("RuralPct") %>' Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lblLawnGarden" runat="server" Text="Lawn & Garden" Visible="false"
ForeColor="White" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtLawnGarden" runat="server" Text='<%# Bind("LawnGarden") %>' Visible="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
<HeaderTemplate>
<asp:Label ID="lblLawnGardenEquipment" runat="server" Text="Lawn & Garden Equipment"
Visible="false" ForeColor="White" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="txtLawnGardenEquipment" runat="server" Text='<%# Bind("LawnGardenEquipment") %>'
Visible="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="HeaderFreez" />
<AlternatingRowStyle BackColor="#E4E4E4" />
<RowStyle BackColor="#F7F7F7" />
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Could someone give me an insight on what to do. FYI - The scriptmanager is on the master page.
2 answers
solution1
3 2013-01-15 15:29:55
You need to do like this ,
full detail : Maintain Scrollbar Position Inside UpdatePanel After Partial PostBack
You need to write down javascript which is part of image for maintaining scroll position
solution2
1 2013-01-15 16:54:33
Since your gridview is located inside the user control that would be the appropriate place to add the code for maintaining the scroll position.
One important thing worth mentioning is that the javascript needs to be executed once the DOM is fully loaded, this can be done as follows:
- Use @Pranay Rana's method and place the script after the
ScriptManagercontrol - Add a reference to jQuery and use
$(document).ready()...
Here's a simple example of how this can be done, I'm sure you can modify this accordingly to work for your scenario :-)
ASPX:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl1.ascx.cs"
Inherits="WebApplication16.UserControl1" %>
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('scrollDiv').scrollLeft;
yPos = $get('scrollDiv').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('scrollDiv').scrollLeft = xPos;
$get('scrollDiv').scrollTop = yPos;
}
});
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="scrollDiv" style="overflow:auto;height: 100px;" />
<asp:GridView ID="gvEmployees" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:CommandField ShowSelectButton="true" />
<asp:BoundField DataField="Name" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Code behind:
public partial class UserControl1 : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
gvEmployees.DataSource = new List<Employee>
{
new Employee{Name="Employee 1"},
new Employee{Name="Employee 2"},
new Employee{Name="Employee 3"},
new Employee{Name="Employee 4"},
new Employee{Name="Employee 5"},
new Employee{Name="Employee 6"},
new Employee{Name="Employee 7"},
};
gvEmployees.DataBind();
}
}
}
public class Employee
{
public string Name { get; set; }
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Postback inside update panel issue
Maintain Jquery selected tab on postback inside of update panel in asp.net
Maintain Scroll Bar position of a div within a gridview after a PostBack
RadioButton inside Update Panel causing postback
bind gridview without doing postback without using update panel
JQuery filter rows of gridview inside an update panel
Bootstrap with Radio Button toggle not triggering async postback inside update panel
Asynchronous file upload inside a update panel and a dropdown to trigger postback not working
How to store a value during partial postback inside update panel
how to maintain gridview row color on postback
Related Tags