auto scroll to bottom gridview asp.net
I have a grid. On clicling addbutton grid will append one empty row. But that pannel should show me the bottom of the page so that user should see the last item. similar to gTalk or chat window in google. Here is my code. How to get the scroll bar position always at the bottom of the page please help me out
<asp:Content ID="Body" ContentPlaceHolderID="MainContent" runat="server">
<script language="javascript" type = "text/javascript" >
window.onload = function() { var objDiv = document.getElementById("<%=pnl.ClientID%>"); objDiv.scrollTop = objDiv.scrollHeight; }
</script>
<ajx:ToolkitScriptManager ID="CalendarAjaxEnabler" runat="server">
</ajx:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<uc1:StatusCodes ID="resultBanner" runat="server" />
<div id="Div" runat="server" class="divFieldRow">
<div>
<center>
<asp:Panel ID="pnl" runat="server" ScrollBars="Both" style="width:auto;height:200px;">
<asp:GridView ID="gvGrid" runat="server" AutoGenerateColumns="False"
GridLines="None" AllowSorting="true" FooterStyle-BackColor="DimGray" EnableViewState="true" >
<Columns>
<asp:TemplateField >
<HeaderTemplate>event</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Label ID="lblDesc" Visible='<%# ! IsInEditMode %>' runat="server" Text='<%# Eval("Desc") %>' />
<asp:TextBox ID="txtDesc" Visible='<%# IsInEditMode %>' runat="server" Text='<%#Eval("Desc")%>' MaxLength="255">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible = "false">
<HeaderTemplate>
Id</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:TextBox ID="txtId" runat="server" Text='<%#Eval("Id")%>' ReadOnly="true"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</asp:Panel>
</center>
</div>
<br />
<br />
<asp:Button runat="server" Text开发者_Go百科="Edit" Style="margin-left: 50px" ID="btnEditevent" OnClick="btnEditEvent_Click" />
<asp:Button runat="server" Text="Add" Style="margin-left: 50px" ID="btnAddevent" OnClick="btnAddRowEvent_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
You have to set MaintainScrollPositionOnPostback="true" at page directive
<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>
you have to use javascript for this ..
window.onload = function() {
var objDiv = document.getElementById("<%=pnl.ClientID%>");
objDiv.scrollTop = objDiv.scrollHeight;
}
here is the sample aspx file with your requirement.. and its working perfectly
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
window.onload = function() {
var objDiv = document.getElementById("<%=pnl.ClientID %>");
objDiv.scrollTop = objDiv.scrollHeight;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="pnl" runat ="server" Height="200" Width="100%" ScrollBars ="vertical">
<table border="1" >
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
<tr><td>this is testing</td></tr>
</table>
</asp:Panel>
</form>
</body>
</html>
加载中,请稍侯......
精彩评论