<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Test.ascx.cs" Inherits="WebUserControl" %> <asp:ScriptManager ID="sm1" runat="server"> <Scripts> <asp:ScriptReference Path="~/ScriptsScroll/jquery-1.4.1.js" /> </Scripts> </asp:ScriptManager> <div id="divProducts" style="height:300px;overflow:auto"> <asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" EnableViewState="False" GridLines="None" AutoGenerateColumns="False"> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:BoundField DataField="ProductId" /> <asp:TemplateField> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <HeaderStyle CssClass="header" BackColor="#990000" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> </asp:GridView> </div> <div> <asp:Button runat="server" Text="Get More records" ID="btnGetMoreRecords" onclick="btnGetMoreRecords_Click" /> </div> <div id="divProgress" style="margin-top: -50px;margin-left:150px;z-index:-999"> <img src="loading.gif" width="100" height="100" alt="" /> </div> <div> <asp:HiddenField runat="server" ID="hiddenLastProductID" /> </div> <script type="text/javascript"> var previousProductId = 0; //Max records to display at a time in the grid. var maxRecordsToDisplay = 30; $(document).ready(function () { //initially hide the loading gif $("#divProgress").hide(); //initially hide the button $("#btnGetMoreRecords").hide(); //Attach function to the scroll event of the div $("#divProducts").scroll(function () { var scrolltop = $('#divProducts').attr('scrollTop'); var scrollheight = $('#divProducts').attr('scrollHeight'); var windowheight = $('#divProducts').attr('clientHeight'); var scrolloffset = 20; if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) { //User has scrolled to the end of the grid. Load new data.. $("#divProgress").ajaxStart(function () { $(this).show(); }); $("#divProgress").ajaxStop(function () { $(this).hide(); }); BindNewData(); } }); }); function BindNewData() { var lastProductId = $("#GridView1 tr:last").children("td:first").html(); //get last table row in order to append the new products var lastRow = $("#GridView1 tr:last"); //Fetch records only when the no. of records displayed in the grid are less than limit. if (GetRowsCount() < maxRecordsToDisplay) { if (parseInt(lastProductId, 10) > parseInt(previousProductId, 10)) { previousProductId = lastProductId; $.post("FetchRecordsHandler.ashx?lastProductId=" + lastProductId, function (data) { if (data != null) { //append new products rows to last row in the gridview. lastRow.after(data); } }); } } else { //Set value of last product id in hidden field so that we can access it from code behind. $("#hiddenLastProductID").val(lastProductId); //Check If there is more records in the database if (parseInt(lastProductId, 10) > parseInt(previousProductId, 10)) $("#btnGetMoreRecords").show(); } } function GetRowsCount() { //Count no. of rows except header row in the grid. var rowCount = $('#GridView1 tr').length - 1; return rowCount; } </script>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)