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