Scroll to end of Panel on PageLoad using jQuery in ASP.Net

Last Reply 10 months ago By pandeyism

Posted 10 months ago

hello,

i am using asp dot net panel inside which i have listview.

 

my listview has 100 records and i keep panel height 100px i want after page laod panel goes direct to bottom so user can last record of listview and user does not need to scroll down to see last record

 

please advice

Posted 10 months ago

Hi nauna,

Please refer below sample.

HTML

<asp:Panel ID="pnlScroll" runat="server" Style="overflow: scroll; overflow-x: hidden;
max-height: 100px; width: 50%">
<asp:ListView ID="ListView1" runat="server" GroupPlaceholderID="groupPlaceHolder1"
    ItemPlaceholderID="itemPlaceHolder1">
    <LayoutTemplate>
        <table cellpadding="" cellspacing="0" border="1" width="50%">
            <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
        </table>
    </LayoutTemplate>
    <GroupTemplate>
        <tr>
            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
        </tr>
    </GroupTemplate>
    <ItemTemplate>
        <td>
            <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
        </td>
        <td>
            <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("Status") %>'></asp:Label>
        </td>
    </ItemTemplate>
</asp:ListView>
</asp:Panel>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () { $('#pnlScroll').scrollTop($('#pnlScroll')[0].scrollHeight); });
</ script>

Namespaces

using System;
using System.Data;

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindListView();
    }
}

private void BindListView()
{
    DataTable dt = new DataTable();
    dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Status") });
    dt.Rows.Add("John", "Pending");
    dt.Rows.Add("Rick", "Complete");
    dt.Rows.Add("Andrew", "Complete");
    dt.Rows.Add("Peter", "Pending");
    dt.Rows.Add("Mudassar", "Complete");
    dt.Rows.Add("John", "Pending");
    dt.Rows.Add("Rick", "Complete");
    dt.Rows.Add("Andrew", "Complete");
    dt.Rows.Add("Peter", "Pending");
    dt.Rows.Add("Mudassar", "Complete");
    dt.Rows.Add("John", "Pending");
    dt.Rows.Add("Rick", "Complete");
    dt.Rows.Add("Andrew", "Complete");
    dt.Rows.Add("Peter", "Pending");
    dt.Rows.Add("Mudassar", "Complete");
    this.ListView1.DataSource = dt;
    this.ListView1.DataBind();
}

Screenshot