CODEWITHSUNDEEP
.netasp.netgridview
premg
premg

Reputation: 1

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="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>

Upvotes: 0

Views: 8099

Answers (2)

Ujjwal Manandhar
Ujjwal Manandhar

Reputation: 2244

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>

Upvotes: 0

Muhammad Akhtar
Muhammad Akhtar

Reputation: 52241

You have to set MaintainScrollPositionOnPostback="true" at page directive

<%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

Upvotes: 2

Related Questions