Load GridView data on scroll and display selected row details in Modal Popup using jQuery AJAX in ASP.Net

Last Reply 3 months ago By mickburden

Posted 3 months ago

Hi everyone, this is regarding code publshed on ASP Snippets called 'Load on demand data in GridView on scroll using ASP.Net and jQuery AJAX' by Mudassar Khan. https://www.aspsnippets.com/Articles/Load-on-demand-data-in-GridView-on-scroll-using-ASPNet-and-jQuery-AJAX.aspx With help from Mudassar Khan and recently a contributer of this forum called AnandM, I need help to be able to run code behind from a link produced within the gridview. With the altered Code a gridview is displayed with Data from a database, on the webpage which as you scroll down the gridview gets the next lot of data. The first column has a hyperlink attached and if you click the link an Ajax ModalPopupExtender appears and the text of the link appears within the popup.Ultimately what I want is when the link is clicked I'd like to pass the text from the cell I've clicked on to a vb proc that takes runs a query on the database and returns the data back to the ModalPopupExtender and then shows the popup. I've included all the code as modified by AnandM. I'd appreciate any help on this please

Kind regards

Mick

HTML 

<%@ Page Title="" Language="VB" MasterPageFile="~/Masterpages/UllixMasterPage.master"
    AutoEventWireup="false" CodeFile="movie2.aspx.vb" Inherits="Video_Movies_movie2" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ChildContent1" runat="Server">
    <asp:Panel ID="Panel1" Height="300" runat="server">
        <!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">
        <style type="text/css">
            .modalBackground
            {
                background-color: Black;
                filter: alpha(opacity=40);
                opacity: 0.4;
            }
            .modalPopup
            {
                background-color: #FFFFFF;
                width: 300px;
                border: 3px solid #0DA9D0;
            }
            .modalPopup .header
            {
                background-color: #2FBDF1;
                height: 30px;
                color: White;
                line-height: 30px;
                text-align: center;
                font-weight: bold;
            }
            .modalPopup .body
            {
                min-height: 50px;
                line-height: 30px;
                text-align: center;
                padding: 5px;
            }
            .modalPopup .footer
            {
                padding: 3px;
            }
            .modalPopup .button
            {
                height: 23px;
                color: White;
                line-height: 23px;
                text-align: center;
                font-weight: bold;
                cursor: pointer;
                background-color: #9F9F9F;
                border: 1px solid #5C5C5C;
            }
            .modalPopup td
            {
                text-align: left;
            }
            .Grid td
            {
                background-color: #A1DCF2;
                color: black;
                font-size: 10pt;
                font-family: Arial;
                line-height: 200%;
                cursor: pointer;
                width: 100px;
            }
            .Grid th
            {
                background-color: #3AC0F2;
                color: White;
                font-family: Arial;
                font-size: 10pt;
                line-height: 200%;
                width: 100px;
            }
            .style2
            {
                width: 100%;
            }
            .style3
            {
                width: 24px;
            }
        </style>
        <body>
            <form id="form1">
            <table class="style2">
                <tr>
                    <td class="style3">
                        &nbsp;
                    </td>
                    <td>
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td class="style3">
                        &nbsp;
                    </td>
                    <td>
                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                            <ContentTemplate>
                                <table style="width: 100%">
                                    <tr>
                                        <td style="width: 28px">
                                            &nbsp;
                                        </td>
                                        <td>
                                            <table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 1180px;
                                                border-collapse: collapse;">
                                                <tr>
                                                    <th scope="col" style="width: 420px;">
                                                        Movie Title
                                                    </th>
                                                    <th scope="col" style="width: 80px;">
                                                        Movie Genre
                                                    </th>
                                                    <th scope="col" style="width: 165px;">
                                                        FilmSeries
                                                    </th>
                                                    <th scope="col" style="width: 142px;">
                                                        Film Studio
                                                    </th>
                                                    <th scope="col" style="width: 60px;">
                                                        Film Year
                                                    </th>
                                                    <th scope="col" style="width: 63px;">
                                                        File Ext
                                                    </th>
                                                    <th scope="col" style="width: 40px;">
                                                        ID
                                                    </th>
                                                    <th scope="col" style="width: 40px;">
                                                        mediatypes
                                                    </th>
                                                </tr>
                                            </table>
                                            <div id="dvGrid" style="height: 565px; overflow: auto; width: 1200px">
                                                <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CssClass="Grid"
                                                    Width="1180px" Font-Names="Verdana" Font-Size="XX-Small" Font-Bold="True" OnRowDataBound="gvCustomers_RowDataBound">
                                                    <Columns>
                                                        <asp:BoundField DataField="title" HeaderText="Movie Title" ItemStyle-CssClass="title"
                                                            ItemStyle-Width="400" HeaderStyle-Width="400">
                                                            <HeaderStyle Width="400px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="title" Width="400px" />
                                                        </asp:BoundField>
                                                        <asp:BoundField DataField="genre" HeaderText="Movie Genre" ItemStyle-CssClass="genre"
                                                            ItemStyle-Width="80" HeaderStyle-Width="80">
                                                            <HeaderStyle Width="80px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="genre" Width="80px" />
                                                        </asp:BoundField>
                                                        <asp:BoundField DataField="filmseries" HeaderText="Film Series" ItemStyle-CssClass="filmseries"
                                                            ItemStyle-Width="160" HeaderStyle-Width="160">
                                                            <HeaderStyle Width="160px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="filmseries" Width="160px" />
                                                        </asp:BoundField>
                                                        <asp:BoundField DataField="studio" HeaderText="Film Studio" ItemStyle-CssClass="studio"
                                                            ItemStyle-Width="130" HeaderStyle-Width="130">
                                                            <HeaderStyle Width="130px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="studio" Width="130px" />
                                                        </asp:BoundField>
                                                        <asp:BoundField DataField="filmyear" HeaderText="Film Year" ItemStyle-CssClass="filmyear"
                                                            ItemStyle-Width="60" HeaderStyle-Width="60">
                                                            <HeaderStyle Width="60px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="filmyear" Width="60px" />
                                                        </asp:BoundField>
                                                        <asp:BoundField DataField="fileext" HeaderText="File Ext" ItemStyle-CssClass="fileext"
                                                            ItemStyle-Width="60" HeaderStyle-Width="60">
                                                            <HeaderStyle Width="60px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="fileext" Width="60px" />
                                                        </asp:BoundField>
                                                        <asp:BoundField DataField="recid" HeaderText="recid" ItemStyle-CssClass="recid" ItemStyle-Width="40"
                                                            HeaderStyle-Width="40">
                                                            <HeaderStyle Width="40px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="recid" Width="40px" />
                                                        </asp:BoundField>
                                                        <asp:BoundField DataField="mediatype" HeaderText="mediatype" ItemStyle-CssClass="mediatype"
                                                            ItemStyle-Width="40" HeaderStyle-Width="40">
                                                            <HeaderStyle Width="40px" />
                                                            <ItemStyle Font-Names="Verdana" Font-Size="XX-Small" CssClass="mediatype" Width="40px" />
                                                        </asp:BoundField>
                                                    </Columns>
                                                </asp:GridView>
                                                <br />
                                                <asp:Button ID="btnPopUp" Text="ShowPopUp" OnClick="ShowPopUp" Style="display: none;"
                                                    runat="server" />
                                                <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" />
                                                <asp:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel3" TargetControlID="btnShow"
                                                    CancelControlID="btnClose" BackgroundCssClass="modalBackground">
                                                </asp:ModalPopupExtender>
                                                <asp:Panel ID="Panel3" runat="server" CssClass="modalPopup" align="center" Style="display: none">
                                                    Modal PopUp was Called By
                                                    <asp:Label ID="lblContactName" runat="server" /><br />
                                                    <asp:Button ID="btnClose" runat="server" Text="Close" />
                                                </asp:Panel>
                                                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                                            </div>
                                            <br />
                                            <br />
                                            <br />
                                            <br />
                                            <%--<script type="text/javascript" src="jquery-1.11.3.js"></script>--%>
                                            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
                                            <script type="text/javascript">
                                                var pageIndex = 1;
                                                var pageCount;
                                                $(function () {
                                                    $("[id$=gvCustomers] tr").eq(0).remove();
                                                    $(".title").click(function () {
                                                        $('[id*=lblContactName]').html($(this).html());
                                                        $('[id*=btnShow]').click();
                                                    });
                                                });

                                                //Load GridView Rows when DIV is scrolled
                                                $("#dvGrid").on("scroll", function (e) {
                                                    var $o = $(e.currentTarget);
                                                    if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
                                                        GetRecords();
                                                    }
                                                });

                                                //Function to make AJAX call to the Web Method
                                                function GetRecords() {
                                                    pageIndex++;
                                                    if (pageIndex == 2 || pageIndex <= pageCount) {
                                                        if ($("[id$=gvCustomers] .loader").length == 0) {
                                                            var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                                                            row.addClass("loader");
                                                            row.children().remove();
                                                            row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif" /></td>');
                                                            $("[id$=gvCustomers]").append(row);
                                                        }
                                                        $.ajax({
                                                            type: "POST",
                                                            url: "Movie2.aspx/GetCustomers",
                                                            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 to recieve XML response append rows to GridView
                                                function OnSuccess(response) {
                                                    var xmlDoc = $.parseXML(response.d);
                                                    var xml = $(xmlDoc);
                                                    pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
                                                    var customers = xml.find("Customers");
                                                    $("[id$=gvCustomers] .loader").remove();
                                                    customers.each(function () {
                                                        var customer = $(this);
                                                        var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                                                        $(".title", row).html(customer.find("title").text());
                                                        $(".genre", row).html(customer.find("genre").text());
                                                        $(".filmseries", row).html(customer.find("filmseries").text());
                                                        $(".studio", row).html(customer.find("studio").text());
                                                        $(".filmyear", row).html(customer.find("filmyear").text());
                                                        $(".fileext", row).html(customer.find("fileext").text());
                                                        $(".recid", row).html(customer.find("recid").text());
                                                        $(".mediatype", row).html(customer.find("mediatype").text());
                                                        $("[id$=gvCustomers]").append(row);
                                                    });

                                                    //Hide Loader
                                                    $("#loader").hide();
                                                }
                                            </script>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </td>
                </tr>
            </table>
            </form>
        </body>
        </html>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server">
        <table class="style2">
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </asp:Panel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" runat="Server">
</asp:Content>

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Web.Services
Imports System.Collections.Generic
Partial Class Video_Movies_movie2
    'Inherits System.Web.UI.Page
    Inherits BasePage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            gvCustomers.DataSource = GetCustomersPageWise(1, 40)
            gvCustomers.DataBind()
        End If
        If Page.IsPostBack = False Then
            MyBase.LogActivity("Movies")
            Title = ConstClass.saveHitsNewToggleAdmin("Movies", "movies New", Request.UserHostAddress, True)
        End If

    End Sub

    Public Shared Function GetCustomersPageWise(ByVal pageIndex As Integer, ByVal pageSize As Integer) As DataSet
        Dim constring As String = ConfigurationManager.ConnectionStrings("ClubConnString").ConnectionString
        Using con As New SqlConnection(constring)
            Using cmd As New SqlCommand("GetMoviesMulti")
                cmd.CommandType = CommandType.StoredProcedure
                cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
                cmd.Parameters.AddWithValue("@PageSize", pageSize)
                cmd.Parameters.AddWithValue("@mediatype", "Movie")
                cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
                Using sda As New SqlDataAdapter()
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    Using ds As New DataSet()
                        sda.Fill(ds, "Customers")
                        Dim dt As New DataTable("PageCount")
                        dt.Columns.Add("PageCount")
                        dt.Rows.Add()
                        dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
                        ds.Tables.Add(dt)
                        Return ds
                    End Using
                End Using
            End Using
        End Using
    End Function
    Protected Sub gvCustomers_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim drv As DataRowView = DirectCast(e.Row.DataItem, DataRowView)
            Dim mylink As New HtmlAnchor()
            mylink.Attributes("class") = "title"
            Dim strid As String = e.Row.Cells(0).Text
            mylink.HRef = "#"
            mylink.InnerText = e.Row.Cells(0).Text
            e.Row.Cells(0).CssClass = ""
            e.Row.Cells(0).Controls.Add(mylink)
        End If
    End Sub
    Protected Sub ShowPopUp(ByVal sender As Object, ByVal e As EventArgs)
        lblContactName.Text = "WWWWWWWW"
        ' mp1.Show()
    End Sub

    <WebMethod()> _
    Public Shared Function GetCustomers(ByVal pageIndex As Integer) As String
        'Added to similate delay so that we see the loader working
        'Must be removed when moving to production
        System.Threading.Thread.Sleep(2000)

        Return GetCustomersPageWise(pageIndex, 40).GetXml()
    End Function
End Class

 

 

Posted 3 months ago

Hi mickburden,

I have used Northwind Database's Customer and Order Table for achieving the task.

Install the Northwind and Pubs Sample Databases in SQL Server Express

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<%@ Page Title="" Language="C#" MasterPageFile="~/Masterpages/UllixMasterPage.master"
    AutoEventWireup="true" CodeFile="Movie2.aspx.cs" Inherits="Movie2" %>

<%@ Register TagPrefix="cc1" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div align="center">
        <table class="Grid" cellspacing="0" rules="all" border="1" id="Table1" style="width: 500px;
            border-collapse: collapse;">
            <tr>
                <th scope="col" style="width: 200px;">
                    Customer ID
                </th>
                <th scope="col" style="width: 200px;">
                    Customer Name
                </th>
                <th scope="col" style="width: 100px;">
                    City
                </th>
                <th scope="col" style="width: 100px;">
                    Country
                </th>
                <th scope="col" style="width: 100px;">
                    Postal Code
                </th>
            </tr>
        </table>
        <div id="dvGrid" style="height: 250px; overflow: auto; width: 525px">
            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
                Width="500" OnRowDataBound="gvCustomers_RowDataBound">
                <Columns>
                    <asp:BoundField DataField="CustomerId" HeaderText="Customer Id" ItemStyle-CssClass="customerId"
                        ItemStyle-Width="200" HeaderStyle-Width="200" />
                    <asp:BoundField DataField="ContactName" HeaderText="Customer Name" ItemStyle-CssClass="contactName"
                        ItemStyle-Width="200" HeaderStyle-Width="200" />
                    <asp:BoundField DataField="City" HeaderText="City" ItemStyle-CssClass="city" ItemStyle-Width="100"
                        HeaderStyle-Width="100" />
                    <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-CssClass="country"
                        ItemStyle-Width="100" HeaderStyle-Width="100" />
                    <asp:BoundField DataField="PostalCode" HeaderText="Postal Code" ItemStyle-CssClass="postal"
                        ItemStyle-Width="100" HeaderStyle-Width="100" />
                </Columns>
            </asp:GridView>
        </div>
        <br />
        <asp:HiddenField ID="hfCustomerId" runat="server" />
        <asp:Button ID="btnPopUp" Text="ShowPopUp" OnClick="ShowPopUp" Style="display: none;"
            runat="server" />
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="btnShow" runat="server" Style="display: none" Text="Show Modal Popup" />
        <!-- ModalPopupExtender -->
        <cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panel1" TargetControlID="btnShow"
            CancelControlID="btnClose" BackgroundCssClass="modalBackground">
        </cc1:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" Style="display: none">
            <table>
                <tr>
                    <th colspan="2">
                        Order Detail
                    </th>
                </tr>
                <tr>
                    <td>
                        CustomerID:
                    </td>
                    <td>
                        <asp:Label ID="lblCustomerID" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        OrderID:
                    </td>
                    <td>
                        <asp:Label ID="lblOrderID" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        ShipName:
                    </td>
                    <td>
                        <asp:Label ID="lblShipName" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                        ShipCity:
                    </td>
                    <td>
                        <asp:Label ID="lblShipCity" runat="server" />
                    </td>
                </tr>
            </table>
            <asp:Button ID="btnClose" runat="server" Text="Close" />
        </asp:Panel>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            var pageIndex = 1;
            var pageCount;
            $(function () {
                $("[id$=gvCustomers] tr").eq(0).remove();
                $(".customerId").click(function () {
                    $('[id*=hfCustomerId]').val($(this)[0].innerText);
                    $('[id*=btnPopUp]').click();
                });
            });

            $("#dvGrid").on("scroll", function (e) {
                var $o = $(e.currentTarget);
                if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
                    GetRecords();
                }
            });

            function GetRecords() {
                pageIndex++;
                if (pageIndex == 2 || pageIndex <= pageCount) {
                    if ($("[id$=gvCustomers] .loader").length == 0) {
                        var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                        row.addClass("loader");
                        row.children().remove();
                        row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif"  /></td>');
                        $("[id*=gvCustomers]").append(row);
                    }
                    $.ajax({
                        type: "POST",
                        url: "Movie2.aspx/GetCustomers",
                        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) {
                // debugger;
                var xmlDoc = $.parseXML(response.d);
                var xml = $(xmlDoc);
                pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
                var customers = xml.find("Customers");
                $("[id$=gvCustomers] .loader").remove();
                customers.each(function () {
                    var customer = $(this);
                    // debugger;
                    var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                    var anchorTag = '<a href="#">' + customer.find("CustomerID").text() + '</a>';
                    $(".customerId", row).html(anchorTag);
                    $(".contactName", row).html(customer.find("ContactName").text());
                    $(".city", row).html(customer.find("City").text());
                    $(".postal", row).html(customer.find("PostalCode").text());
                    $(".country", row).html(customer.find("Country").text());
                    $("[id*=gvCustomers]").append(row);
                });

                $("#loader").hide();
            }
        </script>
        <style type="text/css">
            .modalBackground
            {
                background-color: Black;
                filter: alpha(opacity=40);
                opacity: 0.4;
            }
            .modalPopup
            {
                background-color: #FFFFFF;
                width: 300px;
                border: 3px solid #0DA9D0;
            }
            .modalPopup .header
            {
                background-color: #2FBDF1;
                height: 30px;
                color: White;
                line-height: 30px;
                text-align: center;
                font-weight: bold;
            }
            .modalPopup .body
            {
                min-height: 50px;
                line-height: 30px;
                text-align: center;
                padding: 5px;
            }
            .modalPopup .footer
            {
                padding: 3px;
            }
            .modalPopup .button
            {
                height: 23px;
                color: White;
                line-height: 23px;
                text-align: center;
                font-weight: bold;
                cursor: pointer;
                background-color: #9F9F9F;
                border: 1px solid #5C5C5C;
            }
            .modalPopup td
            {
                text-align: left;
            }
            .Grid td
            {
                background-color: #A1DCF2;
                color: black;
                font-size: 10pt;
                font-family: Arial;
                line-height: 200%;
                cursor: pointer;
                width: 100px;
            }
            .Grid th
            {
                background-color: #3AC0F2;
                color: White;
                font-family: Arial;
                font-size: 10pt;
                line-height: 200%;
                width: 100px;
            }
        </style>
    </div>
</asp:Content>

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        gvCustomers.DataSource = GetCustomersPageWise(1, 10)
        gvCustomers.DataBind()
    End If
End Sub

Protected Sub ShowPopUp(sender As Object, e As EventArgs)
    Dim constring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constring)
        Using cmd As New SqlCommand("SELECT TOP 1 OrderID,ShipName,ShipCity FROM Orders WHERE CustomerID = @CustomerId", con)
            cmd.Parameters.AddWithValue("@CustomerId", hfCustomerId.Value.Trim())
            Using sda As New SqlDataAdapter(cmd)
                Dim dt As New DataTable()
                sda.Fill(dt)
                lblCustomerID.Text = hfCustomerId.Value.Trim()
                lblOrderID.Text = dt.Rows(0)("OrderID").ToString()
                lblShipName.Text = dt.Rows(0)("ShipName").ToString()
                lblShipCity.Text = dt.Rows(0)("ShipCity").ToString()
            End Using
        End Using
    End Using
    gvCustomers.DataSource = GetCustomersPageWise(1, 10)
    gvCustomers.DataBind()
    mp1.Show()
End Sub

Protected Sub gvCustomers_RowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim drv As DataRowView = DirectCast(e.Row.DataItem, DataRowView)
        Dim mylink As New HtmlAnchor()
        mylink.Attributes("class") = "customerId"
        Dim strid As String = e.Row.Cells(0).Text
        mylink.HRef = "#"
        mylink.InnerText = e.Row.Cells(0).Text
        '  e.Row.Cells[0].CssClass = "";
        e.Row.Cells(0).Controls.Add(mylink)
    End If
End Sub

Public Shared Function GetCustomersPageWise(pageIndex As Integer, pageSize As Integer) As DataSet
    Dim constring As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As New SqlConnection(constring)
        Using cmd As New SqlCommand("[Customer_GetCustomerWithPaging]")
            cmd.CommandType = CommandType.StoredProcedure
            cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
            cmd.Parameters.AddWithValue("@PageSize", pageSize)
            cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
            Using sda As New SqlDataAdapter()
                cmd.Connection = con
                sda.SelectCommand = cmd
                Using ds As New DataSet()
                    sda.Fill(ds, "Customers")
                    Dim dt As New DataTable("PageCount")
                    dt.Columns.Add("PageCount")
                    dt.Rows.Add()
                    dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
                    ds.Tables.Add(dt)
                    Return ds
                End Using
            End Using
        End Using
    End Using
End Function

<WebMethod()> _
Public Shared Function GetCustomers(pageIndex As Integer) As String
    'Added to similate delay so that we see the loader working
    'Must be removed when moving to production
    System.Threading.Thread.Sleep(2000)
    Return GetCustomersPageWise(pageIndex, 10).GetXml()
End Function

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        gvCustomers.DataSource = GetCustomersPageWise(1, 10);
        gvCustomers.DataBind();
    }
}

protected void ShowPopUp(object sender, EventArgs e)
{
    string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constring))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 1 OrderID,ShipName,ShipCity FROM Orders WHERE CustomerID = @CustomerId", con))
        {
            cmd.Parameters.AddWithValue("@CustomerId", hfCustomerId.Value.Trim());
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                lblCustomerID.Text = hfCustomerId.Value.Trim();
                lblOrderID.Text = dt.Rows[0]["OrderID"].ToString();
                lblShipName.Text = dt.Rows[0]["ShipName"].ToString();
                lblShipCity.Text = dt.Rows[0]["ShipCity"].ToString();
            }
        }
    }
    gvCustomers.DataSource = GetCustomersPageWise(1, 10);
    gvCustomers.DataBind();
    mp1.Show();
}

protected void gvCustomers_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        DataRowView drv = (DataRowView)e.Row.DataItem;
        HtmlAnchor mylink = new HtmlAnchor();
        mylink.Attributes["class"] = "customerId";
        string strid = e.Row.Cells[0].Text;
        mylink.HRef = "#";
        mylink.InnerText = e.Row.Cells[0].Text;
        //  e.Row.Cells[0].CssClass = "";
        e.Row.Cells[0].Controls.Add(mylink);
    }
}

public static DataSet GetCustomersPageWise(int pageIndex, int pageSize)
{
    string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constring))
    {
        using (SqlCommand cmd = new SqlCommand("[Customer_GetCustomerWithPaging]"))
        {
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
            cmd.Parameters.AddWithValue("@PageSize", pageSize);
            cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataSet ds = new DataSet())
                {
                    sda.Fill(ds, "Customers");
                    DataTable dt = new DataTable("PageCount");
                    dt.Columns.Add("PageCount");
                    dt.Rows.Add();
                    dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                    ds.Tables.Add(dt);
                    return ds;
                }
            }
        }
    }
}

[WebMethod]
public static string GetCustomers(int pageIndex)
{
    //Added to similate delay so that we see the loader working
    //Must be removed when moving to production
    System.Threading.Thread.Sleep(2000);
    return GetCustomersPageWise(pageIndex, 10).GetXml();
}

ScreenShot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html