Please verify this code....
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxGrid.aspx.cs" Inherits="AjaxGrid" %>
<!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">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script runat="server">
</script>
<script language="javascript" type="text/javascript">
debugger;
var _gridView;
var _pager;
var _gridView2;
var _pager2;
var _childPage=0;
var _row;
var _childrows=null;
var _sObj=null;
var _sImgId=null
var ds1=new Array();
function expandcollapse(row,imgid)
{
debugger;
_row=row;
_gridView2 = null;
var div = _gridView._element.document.getElementById(_sObj);
var img = _gridView._element.document.getElementById(imgid);
if (_gridView._element.document.getElementById('nested').style.display == "none")
{
_gridView._element.document.getElementById('nested').style.display = "block";
if (_row == 'alt')
{
img.src = "Images/minus.gif";
}
else
{
img.src = "Images/minus.gif";
}
img.alt = "Close to view other Customers";
}
else
{
_gridView._element.document.getElementById('nested').style.display = "none";
if (_row == 'alt')
{
img.src = "Images/plus.gif";
}
else
{
img.src = "Images/plus.gif";
}
img.alt = "Expand to show Orders";
}
}
//***************GirdView1 Events *****************//
function pageLoad(sender, e)
{
debugger;
_gridView = $find('<%= GridView1.ClientID %>');
_pager = $find('<%= Pager1.ClientID %>');
_gridView2=$find('<%=GridView2.ClientID %>');
_pager2=$find('<%= Pager2.ClientID %>');
loadCustomers();
}
function loadCustomers()
{
debugger;
var sortColumn = GridView1.get_sortColumn();
var sortOrder = (GridView1.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';
var startIndex = (Pager1.get_pageIndex() * Pager1.get_pageSize());
DataService.GetCustomerList(startIndex, Pager1.get_pageSize(), sortColumn, sortOrder, onLoadSuccess);
// writeMessage('');
// onLoadSuccess(ds1.value)
}
function onLoadSuccess(result)
{
debugger;
Pager1.set_recordCount(result.Total);
GridView1.set_dataSource(result.Rows);
GridView1.dataBind();
}
function onSortCommand(sender, e)
{
GridView1.set_sortColumn(e.get_sortColumn())
GridView1.set_sortOrder(e.get_sortOrder());
Pager1.set_pageIndex(0); // need to reset the page index as sorting is changed
loadCustomers();
}
function onEditCommand(sender,e)
{
}
function onUpdateCommand(sender,e)
{
}
function onDeleteCommand(sender,e)
{
}
function LoadOrders(CustomerId)
{
debugger;
var sortColumn = GridView2.get_sortColumn();
var sortOrder = (GridView2.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';
var startIndex = (Pager2.get_pageIndex() * Pager2.get_pageSize());
DataService.GetOrdersList(startIndex, Pager2.get_pageSize(), sortColumn, sortOrder,CustomerId, loadchildGridView);
}
function loadchildGridView(result)
{
debugger;
Pager2.set_recordCount(result.Total);
GridView2.set_dataSource(result.Rows);
GridView2.dataBind();
}
function BindChildGrid(id,create_row)
{
var sortColumn = GridView2.get_sortColumn();
var sortOrder = (GridView2.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';
var startIndex = (Pager2.get_pageIndex() * Pager2.get_pageSize());
DataService.GetOrdersList(startIndex, Pager2.get_pageSize(), sortColumn, sortOrder,id, loadNestedGridView);
var tableRef = $get('<%= GridView1.ClientID %>');
//insert a new row
var row =create_row;
// var row = evt.target.parentNode;
var newRow = tableRef.insertRow(row.rowIndex+1);
// Insert a cell in the row at index 0
var td1= document.createElement('td');
var td2= document.createElement('td');
newRow.appendChild(td1);
newRow.appendChild(td2);
var newCell = newRow.insertCell(2);
newCell.colSpan = GridView1.get_columns().length;
var nestedDiv=$get("nested");
newCell.appendChild($get("nested"));
}
function showNested(evt, context)
{
debugger;
_sObj=context[0].id;
_sImgId=context[1].imgId;
_row=context[2].rowid;
var sortColumn = GridView2.get_sortColumn();
var sortOrder = (GridView2.get_sortOrder() == AjaxDataControls.GridViewSortOrder.Descending) ? 'DESC' : 'ASC';
var startIndex = (Pager2.get_pageIndex() * Pager2.get_pageSize());
DataService.GetOrdersList(startIndex, Pager2.get_pageSize(), sortColumn, sortOrder,context[0].id, loadNestedGridView);
AjaxGrid.GetCustomerList1('', '', '', '');
// onLoadSuccess(ds1.value);
var tableRef = $get('<%= GridView1.ClientID %>');
//insert a new row
var row = evt.target.parentNode.parentNode;
// var row = evt.target.parentNode;
var newRow = tableRef.insertRow(row.rowIndex+1);
// Insert a cell in the row at index 0
var td1= document.createElement('td');
var td2= document.createElement('td');
newRow.appendChild(td1);
newRow.appendChild(td2);
var newCell = newRow.insertCell(2);
newCell.colSpan = GridView1.get_columns().length;
var nestedDiv= GridView1._element.parentNode.parentNode.parentNode.document.getElementById('nested')
//var nestedDiv=$get("nested");
newCell.appendChild(nestedDiv);
}
function loadNestedGridView(result)
{
debugger;
Pager2.set_recordCount(result.Total);
GridView2.set_dataSource(result.Rows);
GridView2.dataBind();
var img = _gridView._element.document.getElementById(_sImgId);
if (_gridView._element.document.getElementById('nested').style.display == "none")
{
_gridView._element.document.getElementById('nested').style.display = "block";
if (_row == 'alt')
{
img.src = "Images/minus.gif";
}
else
{
img.src = "Images/minus.gif";
}
img.alt = "Close to view other Customers";
}
else
{
_gridView._element.document.getElementById('nested').style.display = "none";
if (_row == 'alt')
{
img.src = "Images/plus.gif";
}
else
{
img.src = "Images/plus.gif";
}
img.alt = "Expand to show Orders";
}
}
function onRowCreated(sender,e)
{
}
function onRowDataBound(sender, e)
{
debugger;
var row = e.get_row(); //.get_rowIndex()
if(row.get_isDataRowType())
{
var rIndex = row.get_rowIndex();
var id = GridView1.get_dataKeys()[rIndex];
var context = new Array();
context[0] = { id: id};
//create function callback so we can pass the parent id
var callback = Function.createCallback(showNested, context);
// alert(rIndex);
var imgrow=row.findControl('imgdiv');
if (imgrow)
{
$addHandler(imgrow, "click", callback);
context[1]={imgId:imgrow.id};
context[2]={rowid:row};
}
var create_row= row._container;
//BindChildGrid(id,create_row);
}
//if(imgrow)
// imgrow.onclick = function () {expandcollapse(row,imgrow.id)};
}
function pageChanged(sender, e)
{
debugger;
Pager1.set_pageIndex(e.get_newPageIndex());
loadCustomers();
}
//***************GirdView1 Events *****************//
//***************GirdView2 Events *****************//
function onEditCommand_2(sender,e)
{
}
function onCancelCommand_2(sender,e)
{
}
function onUpdateCommand_2(sender,e)
{
}
function onDeleteCommand_2(sender,e)
{
}
function onRowCommand_2(sender, e)
{
//debugger;
}
function onRowDataBound_2(sender, e)
{
}
function onRowCreated_2(sender, e)
{
}
function onSortCommand_2(sender, e)
{
debugger;
GridView2.set_sortColumn(e.get_sortColumn())
GridView2.set_sortOrder(e.get_sortOrder());
Pager2.set_pageIndex(0); // need to reset the page index as sorting is changed
LoadOrders(_sObj);
}
function pageChanged_2(sender, e)
{
debugger;
Pager2.set_pageIndex(e.get_newPageIndex());
LoadOrders(_sObj);
}
//***************GirdView2 Events *****************//
function onColumnsLoaded(sender, e)
{
loadCustomers();
}
function onColumnDragStart(sender, e)
{
var column = e.get_column();
// writeMessage(String.format('{0} Column Drag Started<br/>', column.get_headerText()));
}
function onColumnDropped(sender, e)
{
var column = e.get_column();
//writeMessage(String.format('{0} Column Dropped in index {1} from index {2}<br/>', column.get_headerText(), e.get_newIndex(), e.get_oldIndex()));
GridView1.saveColumnsToProfile('DndColumns');
}
function writeMessage(message)
{
debugger;
$get('divEvents').innerHTML += message;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="TheScriptManager" runat="server" EnablePageMethods="false"
EnablePartialRendering="false">
<Services>
<asp:ServiceReference Path="~/DataService.asmx" />
</Services>
<Scripts>
<asp:ScriptReference Path="~/PreviewScripts/PreviewScript.js" />
<asp:ScriptReference Path="~/PreviewScripts/PreviewDragDrop.js" />
<asp:ScriptReference Path="~/PreviewScripts/PreviewGlitz.js" />
</Scripts>
</asp:ScriptManager>
<AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0"
CellPadding="3" SortColumn="ContactName" DataKeyName="ID" SortOrderAscendingImageUrl="~/Images/up.gif"
SortOrderDescendingImageUrl="~/Images/dn.gif" RowCreatedEvent="onRowCreated"
ColumnDragStartEvent="onColumnDragStart"
ColumnsLoadedFromProfileEvent="onColumnsLoaded"
ColumnDroppedEvent="onColumnDropped"
SortCommandEvent="onSortCommand" RowDataBoundEvent="onRowDataBound" Font-Names="Verdana"
Font-Size="X-Small" Width="453px">
<RowStyle BackColor="Gainsboro" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="ActiveBorder" ForeColor="White" />
<FooterStyle BackColor="White" />
<Columns>
<AjaxData:GridViewTemplateColumn ColumnID="1">
<ItemTemplate>
<img id="imgdiv" alt="Click to show/hide Orders for Customer" width="9px" border="0"
src="Images/plus.gif" />
</ItemTemplate>
</AjaxData:GridViewTemplateColumn>
<AjaxData:GridViewTemplateColumn ColumnID="2">
<ItemTemplate>
<input type="checkbox" id="chekId" visible="true" />
</ItemTemplate>
</AjaxData:GridViewTemplateColumn>
<AjaxData:GridViewBoundColumn HeaderText="ID" DataField="ID" SortField="CustomerID" ColumnID="3">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn HeaderText="CustomerName" DataField="ContactName" SortField="ContactName"
ColumnID="4">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn HeaderText="ContactTitle" DataField="ContactTitle"
SortField="ContactTitle" ColumnID="5">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn HeaderText="Address" DataField="Address" SortField="Address"
ColumnID="6">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn HeaderText="Country" DataField="Country" SortField="Country"
ColumnID="7">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewTemplateColumn ColumnID="8">
<ItemTemplate>
<span></span>
</ItemTemplate>
</AjaxData:GridViewTemplateColumn>
<AjaxData:GridViewCommandColumn ShowEditButton="True" AllowDragAndDrop="False" ColumnID="9"
ShowCancelButton="False" />
</Columns>
</AjaxData:GridView>
<tr>
<AjaxData:Pager ID="Pager1" Width="100px" runat="server" CssClass="PagerRowStyle" CurrentPageStyle-CssClass="PagerCurrentPage"
OtherPageStyle-CssClass="PagerOtherPage" PageChangedEvent="pageChanged">
</AjaxData:Pager>
</tr>
<div id="nested" style="left: 20px; display:none ">
<tr>
<td colspan="100%" style="height: 180px; width: 927px;">
<AjaxData:GridView ID="GridView2" Width="450px" Font-Size="X-Small" Font-Names="Verdana"
runat="server" SortColumn="OrderID" ShowFooter="true" CellSpacing="0" CellPadding="3"
SortOrderAscendingImageUrl="~/Images/up.gif" SortOrderDescendingImageUrl="~/Images/dn.gif"
SortCommandEvent="onSortCommand_2" RowDataBoundEvent="onRowDataBound_2" RowCreatedEvent="onRowCreated_2"
EditCommandEvent="onEditCommand_2" DeleteCommandEvent="onDeleteCommand_2" UpdateCommandEvent="onUpdateCommand_2"
CancelCommandEvent="onCancelCommand_2" Height="112px">
<RowStyle BackColor="Gainsboro" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle BackColor="ActiveBorder" ForeColor="White" />
<FooterStyle BackColor="White" />
<Columns>
<AjaxData:GridViewTemplateColumn ColumnID="1">
<ItemTemplate>
<input type="checkbox" id="chekId2" visible="true" />
</ItemTemplate>
</AjaxData:GridViewTemplateColumn>
<AjaxData:GridViewBoundColumn HeaderText="OrderID" DataField="OrderID" SortField="OrderID"
ColumnID="1">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn HeaderText="Freight" DataField="Freight" SortField="Freight"
ColumnID="2">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn HeaderText="ShipName" DataField="ShipName" SortField="ShipName"
ColumnID="3">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewBoundColumn HeaderText="ShipAddress" DataField="ShipAddress" SortField="ShipAddress"
ColumnID="4">
<HeaderStyle HorizontalAlign="Left" Wrap="False" />
<ItemStyle HorizontalAlign="Left" />
</AjaxData:GridViewBoundColumn>
<AjaxData:GridViewCommandColumn HeaderText="Edit" ShowEditButton="True" AllowDragAndDrop="False"
ColumnID="5" ShowCancelButton="False">
</AjaxData:GridViewCommandColumn>
</Columns>
</AjaxData:GridView>
</td>
</tr>
<tr>
<td>
<AjaxData:Pager ID="Pager2" runat="server" PageSize="5" CssClass="PagerRowStyle"
CurrentPageStyle-CssClass="PagerCurrentPage" Height="20px" OtherPageStyle-CssClass="PagerOtherPage"
PageChangedEvent="pageChanged_2">
</AjaxData:Pager>
</td>
</tr>
</div>
</form>
</body>
</html>
//*************************DataServise*****************//
public PagedResult<Customer> GetCustomerList(int start, int max, string sortColumn, string sortOrder)
{
if (max == 0)
{
max = 10;
}
if (string.IsNullOrEmpty(sortColumn) || (string.Compare(sortColumn, "Company", true) == 0))
{
sortColumn = "CompanyName";
}
if (string.IsNullOrEmpty(sortOrder))
{
sortOrder = "ASC";
}
const string SQL = "SELECT [CustomerID], " +
" [CompanyName], " +
" [ContactName], " +
" [ContactTitle], " +
" [Address], " +
" [City], " +
" [PostalCode], " +
" [Country], " +
" [Phone] " +
"FROM " +
" ( " +
" SELECT [CustomerID], " +
" [CompanyName], " +
" [ContactName], " +
" [ContactTitle], " +
" [Address], " +
" [City], " +
" [PostalCode], " +
" [Country], " +
" [Phone], " +
" ROW_NUMBER() OVER (ORDER BY [{0}] {1}) AS [RowIndex] " +
" FROM " +
" [Customers] " +
" ) AS [CustomerWithRowIndex] " +
"WHERE " +
" ([RowIndex] > {2}) " +
"AND ([RowIndex] <= ({2} + {3})) " +
" " +
"SELECT COUNT(CustomerID) " +
"FROM " +
" [Customers] ";
int total = 0;
List<Customer> list = new List<Customer>();
using (IDbConnection cnn = CreateConnection())
{
using (IDbCommand cmd = cnn.CreateCommand())
{
cmd.CommandText = string.Format(SQL, sortColumn, sortOrder, start, max);
using (IDataReader rdr = cmd.ExecuteReader())
{
while (rdr.Read())
{
Customer c = BuildCustomer(rdr);
list.Add(c);
}
if ((rdr.NextResult()) && (rdr.Read()))
{
total = rdr.GetInt32(0);
}
}
}
}
if ((list.Count == 0) || (total == 0))
{
return null;
}
PagedResult<Customer> result = new PagedResult<Customer>();
result.Rows = list;
result.Total = total;
return result;
}
[WebMethod()]
public PagedResult<Orders> GetOrdersList(int start, int max, string sortColumn, string sortOrder,string CustID)
{
if (max == 0)
{
max = 10;
}
if (string.IsNullOrEmpty(sortColumn) || (string.Compare(sortColumn, "OrderID", true) == 0))
{
sortColumn = "OrderID";
}
if (string.IsNullOrEmpty(sortOrder))
{
sortOrder = "ASC";
}
const string SQL = "SELECT [OrderID], " +
" [Freight], " +
" [ShipName], " +
" [ShipAddress] " +
"FROM " +
" ( " +
" SELECT [OrderID], " +
" [Freight], " +
" [ShipName], " +
" [ShipAddress], " +
" ROW_NUMBER() OVER (ORDER BY [{0}] {1}) AS [RowIndex] " +
" FROM " +
" [Orders] WHERE [CustomerID]='{4}' " +
" ) AS [OrdersWithRowIndex] " +
"WHERE " +
" ([RowIndex] > {2}) " +
"AND ([RowIndex] <= ({2} + {3})) " +
" " +
"SELECT COUNT(OrderID) " +
"FROM " +
" [Orders] WHERE [CustomerID]='{4}' ";
int total = 0;
List<Orders> list = new List<Orders>();
using (IDbConnection cnn = CreateConnection())
{
using (IDbCommand cmd = cnn.CreateCommand())
{
cmd.CommandText = string.Format(SQL, sortColumn, sortOrder, start, max, CustID);
using (IDataReader rdr = cmd.ExecuteReader())
{
while (rdr.Read())
{
Orders c = BuildOrders(rdr);
list.Add(c);
}
if ((rdr.NextResult()) && (rdr.Read()))
{
total = rdr.GetInt32(0);
}
}
}
}
if ((list.Count == 0) || (total == 0))
{
return null;
}
PagedResult<Orders> result = new PagedResult<Orders>();
result.Rows = list;
result.Total = total;
return result;
}
[WebMethod()]
public Customer[ GetAllCustomers()
{
List<Customer> list = new List<Customer>();
using (IDbConnection cnn = CreateConnection())
{
using (IDbCommand cmd = cnn.CreateCommand())
{
cmd.CommandText = "SELECT [CustomerID], " +
" [CompanyName], " +
" [ContactName], " +
" [ContactTitle], " +
" [Address], " +
" [City], " +
" [PostalCode], " +
" [Country], " +
" [Phone] " +
" From "+
" [Customers] " +
" ORDER BY [CompanyName] ASC ";
using (IDataReader rdr = cmd.ExecuteReader())
{
while (rdr.Read())
{
Customer c = BuildCustomer(rdr);
list.Add(c);
}
}
}
}
if (list.Count == 0)
{
return null;
}
//for (int i = 0; i < list.Count; i++)
//{
// if (i == 0)
// {
// list
.Active = true;
// }
// else
// {
// list.Active = ((i % 2) == 0);
// }
//}
return list.ToArray();
}
public Orders[ GetAllOrders()
{
List<Orders> list = new List<Orders>();
using (IDbConnection cnn = CreateConnection())
{
using (IDbCommand cmd = cnn.CreateCommand())
{
cmd.CommandText = "SELECT [OrderID], " +
" [Freight], " +
" [ShipName], " +
" [ShipAddress] " +
" FROM " +
" [Orders] " +
" ORDER BY [OrderID] ASC ";
using (IDataReader rdr = cmd.ExecuteReader())
{
while (rdr.Read())
{
Orders ord = BuildOrders(rdr);
list.Add(ord);
}
}
}
}
if (list.Count == 0)
{
return null;
}
//for (int i = 0; i < list.Count; i++)
//{
// if (i == 0)
// {
// list.Active = true;
// }
// else
// {
// list.Active = ((i % 2) == 0);
// }
//}
return list.ToArray();
}
//**************@@@@@@@@@@@*************************//
public class Customer : BaseEntity
{
private string _id;
private string _company = string.Empty;
private string _contactName = string.Empty;
private string _contactTitle = string.Empty;
private string _address = string.Empty;
private string _city = string.Empty;
private string _postalCode = string.Empty;
private string _country = string.Empty;
private string _phone = string.Empty;
public string ID
{
get
{
return _id;
}
set
{
_id = value;
}
}
public string Company
{
get
{
return _company;
}
set
{
_company = value;
}
}
public string ContactName
{
get
{
return _contactName;
}
set
{
_contactName = value;
}
}
public string ContactTitle
{
get
{
return _contactTitle;
}
set
{
_contactTitle = value;
}
}
public string Address
{
get
{
return _address;
}
set
{
_address = value;
}
}
public string City
{
get
{
return _city;
}
set
{
_city = value;
}
}
public string PostalCode
{
get
{
return _postalCode;
}
set
{
_postalCode = value;
}
}
public string Country
{
get
{
return _country;
}
set
{
_country = value;
}
}
public string Phone
{
get
{
return _phone;
}
set
{
_phone = value;
}
}
}
public class Orders : BaseEntity
{
private int _orderid;
private decimal _freight;
private string _shipname = string.Empty;
private string _shipaddress = string.Empty;
public int OrderID
{
get
{
return _orderid;
}
set
{
_orderid = value;
}
}
public decimal Freight
{
get
{
return _freight;
}
set
{
_freight = value;
}
}
public string ShipName
{
get
{
return _shipname;
}
set
{
_shipname = value;
}
}
public string ShipAddress
{
get
{
return _shipaddress;
}
set
{
_shipaddress = value;
}
}
}