Sub report in GridView using AJAX

<script type="text/javascript">

function Expand(Ctrl)

{

var imgPlusMinus = Ctrl.id;

var _TrID = imgPlusMinus.replace("imgPlusMinus", "TrOrders");

var lblProductID = imgPlusMinus.replace("imgPlusMinus", "lblProductID");

var _divOrderDetails = imgPlusMinus.replace("imgPlusMinus", "divOrderDetails");

var _ProductID = document.getElementById(lblProductID).innerHTML;

var _QueryString = "";

_QueryString = "PRID=" + _ProductID;

if (document.getElementById(_TrID).style.display == '') {

document.getElementById(_TrID).style.display = 'none';

document.getElementById(imgPlusMinus).src = "../../Common/Images/plus.gif";

}

else {

document.getElementById(_TrID).style.display = '';

document.getElementById(imgPlusMinus).src = "../../Common/Images/minus.gif";

}

var xmlHttp;

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

xmlHttp.onreadystatechange = function() {

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

document.getElementById(_divOrderDetails).innerHTML =

xmlHttp.responseText;

}

}

}

xmlHttp.open("GET", "AjaxPage.aspx?" + _QueryString, true);

xmlHttp.send(null);

return false;

}

</script>

The product id will be sent to the Ajax call page.Based on the id the sales of the products will be formed as HTML table content and that will be returned to the main page. After succession of the HTML content the data will be displayed as subreport in the corresponding product row.

Sub report formation in the Ajax call page.

strHTML = "<table cellpadding='0' cellspacing='0' border='1' width='100%'>";

strHTML += "<tr style='color:orange;'>";

strHTML += "<td>Order ID</td>";

strHTML += "<td>Product ID</td>";

strHTML += "<td>Unit Price</td>";

strHTML += "<td>Quantity</td>";

strHTML += "<td>Discount</td>";

strHTML += "</tr>";

if (dsProdSales.Tables[0].Rows.Count == 0)

{

strHTML += "<tr style='color:yellow;'>";

strHTML += "<td colspan='5' style='text-align:center;'>No records found.</td>";

strHTML += "<tr/>";

}

else

{

for (int index = 0; index < dsProdSales.Tables[0].Rows.Count; index++)

{

strHTML += "<tr style='color:yellow;'>";

strHTML += "<td>" + dsProdSales.Tables[0].Rows[index]["OrderID"].ToString() + "</td>";

strHTML += "<td>" + dsProdSales.Tables[0].Rows[index]["ProductID"].ToString() + "</td>";

strHTML += "<td>" + dsProdSales.Tables[0].Rows[index]["UnitPrice"].ToString() + "</td>";

strHTML += "<td>" + dsProdSales.Tables[0].Rows[index]["Quantity"].ToString() + "</td>";

strHTML += "<td>" + dsProdSales.Tables[0].Rows[index]["Discount"].ToString() + "</td>";

strHTML += "</tr>";

}

}

Sample Screens:

The following are the sample screens.

1(a). The main grid with the product details.

1(b) The Sub report of the product after expand

Conclusion:

I hope that this will be very useful in the sub report implementation. If you have any issues or doubts in this please email me.I have attached the source code of this application. Please post your valuable suggestions.