Load Gridview on Scroll (Incremental Loading)

In this post I will explain loading gridview on scroll.

First of all create UI. Here I am giving sample,

<div>

        <asp:GridView ID="gvImage" runat="server" AutoGenerateColumns="false" ClientIDMode="Static">

            <Columns>

                <asp:TemplateField HeaderText="Sr No." HeaderStyle-HorizontalAlign="Center">

                    <HeaderStyle Width="100" />

                    <ItemStyle HorizontalAlign="Center" />

                    <ItemTemplate>

                        <asp:Label ID="lblID" CssClass="lblID" runat="server" Text='<%# Eval("ID") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

            <Columns>

                <asp:TemplateField HeaderText="Image Name" HeaderStyle-HorizontalAlign="Center">

                    <HeaderStyle Width="200" />

                    <ItemStyle HorizontalAlign="Center" />

                    <ItemTemplate>

                        <asp:Label ID="lblImageName" CssClass="lblImageName" runat="server" Text='<%# Eval("ImageName") %>'></asp:Label>

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

            <Columns>

                <asp:TemplateField HeaderText="Image" HeaderStyle-HorizontalAlign="Center">

                    <ItemTemplate>

                        <asp:Image ID="imgImage" CssClass="imgImage" runat="server" ImageUrl='<%# Eval("Image") %>'

                            Height="300" Width="300" />

                    </ItemTemplate>

                </asp:TemplateField>

            </Columns>

        </asp:GridView>

        <div id="loader">

        <asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/loading.gif" AlternateText="Loading.." Height="100" Width="100"/>

        </div>

    </div>

Now you need to add this script in header part.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <script type="text/javascript">

        var pageIndex = 1;

        $(window).scroll(function () {            

            if ($(window).scrollTop() == $(document).height() - $(window).height()) {

                {                  

                    GetRecords();

                }

            }

        });

        function GetRecords() {

            pageIndex++;

            if (pageIndex >= 1) {

                $("#loader").show();

                $.ajax({

                    type: "POST",

                    url: "LoadPageOnScrol.aspx/GetData",

                    data: '{pageIndex: ' + pageIndex + '}',

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: OnSuccess,

                    failure: function (response) {

                        alert(response.d);

                    },

                    error: function (response) {

                        alert(response.d);

                    }

                });

            }

        }

        function OnSuccess(response) {           

            var xmlDoc = $.parseXML(response.d);

            var xml = $(xmlDoc);

            var Images = xml.find("ImageData");

            Images.each(function () {

                var Image = $(this);

                var table = "<tr><td align='center'><span id='lblID' class='lblID'>" + Image.find("ID").text() + "</span></td><td align='center'><span id='lblImageName' class='lblImageName'>" + Image.find("ImageName").text() + "</span></td><td><img id='imgImage' class='imgImage' style='height:300px;width:300px;' src=" + Image.find("Image").text().replace("~/", "") + "></td></tr>";

                $("#gvImage").find("tbody").append(table);

            });

            $("#loader").hide();

        }

    </script>

Finally add web method to code behind page.

protected void Page_Load(object sender, EventArgs e)

        {

            if (!Page.IsPostBack)

            {

                DataSet ds = new DataSet();

                ds = GetImageData(1);

                gvImage.DataSource = ds;

                gvImage.DataBind();

            }

        }

[WebMethod]

        public static string GetData(int pageIndex)

        {

            return GetImageData(pageIndex).GetXml();

        }

public static DataSet GetImageData(int PageIndex)

        {

            int Start, End;

            Start = (PageIndex * 3) - 2;

            End = (PageIndex * 3);

            SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ToString());

            SqlDataAdapter da = new SqlDataAdapter("select * from ImageData where ID between " + Start + " AND " + End, con);

            DataSet ds = new DataSet();

            da.Fill(ds, "ImageData");

            return ds;

        }

Script to create table is

USE [DATABASE1]

GO

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

SET ANSI_PADDING ON

GO

CREATE TABLE [dbo].[ImageData](

[ID] [int] IDENTITY(1,1) NOT NULL,

[ImageName] [varchar](50) NULL,

[Image] [varchar](100) NULL,

 CONSTRAINT [PK_ImageData] PRIMARY KEY CLUSTERED

(

[ID] ASC

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]

GO

SET ANSI_PADDING OFF

GO

In table I have added path of Image in Image column.

If you have any doubt put comment......