Display ListView Scroll percentage in ProgressBar using jQuery in ASP.Net

Hi nauna,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<div id="dvProgress" style="height: 15px; background-color: Red; width: 0px; text-align: center;">
</div>
<br />
<div id="dvPanel" style="overflow-y: scroll; height: 200px; width: 600px;">
    <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1">
        <LayoutTemplate>
            <table id="ListViewTable">
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                    </th>
                </tr>
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <td>
                <%# Eval("CustomerId")%>
            </td>
            <td>
                <%# Eval("ContactName")%>
            </td>
            <td>
                <%# Eval("Country") %>
            </td>
            <td>
                <asp:TextBox runat="server" ID="txtCity" />
                <asp:Button Text="View" runat="server" ID="btnView" />
            </td>
        </ItemTemplate>
    </asp:ListView>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=dvPanel]').scroll(function () {
                var divScrollPosition = $(this).scrollTop();
                var listViewTableHeight = $('[id*=ListViewTable]').height();
                var divHeight = $(this).height();
                var scrollPercentage = (divScrollPosition / (listViewTableHeight - divHeight)) * 100;
                $('[id*=dvProgress]').html(scrollPercentage.toFixed() + '%');
                $('[id*=dvProgress]').css('width', scrollPercentage.toFixed() + "%");
            });
        });
    </script>
</div>

Namespace

using System.Data;
using System.Configuration;
using System.Data.SqlClient;

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        lvCustomers.DataSource = GetData();
        lvCustomers.DataBind();
    }
}

private DataSet GetData()
{
    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    string query = "SELECT * FROM Customers";
    SqlCommand cmd = new SqlCommand(query);
    using (SqlConnection con = new SqlConnection(conString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Customers");
                return ds;
            }
        }
    }
}

Screenshot