Now I will discuss the Client Side functionality on the Grid
which allows it to make AJAX Calls to the server.
The function below is used to send an Asynchronous Request
to the page using XMLHttpRequest Object. The function state_Change is called as
soon as the onreadystatechange of the XMLHttpRequest object is fired meaning
the object is ready to receive data. The complete function is given below.
Listing 12
function ReloadData(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}The state_Change function verifies that the request is
loaded without any errors. If everything is fine, it calls the ParseXML
function which parses the XML Reponse received.
Listing 13
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
ParseXML(xmlhttp.responseXML.documentElement);
}
else
{
alert("Problem retrieving XML data");
}
}
}The ParseXML function, as the name suggests, parses the XML
received from the server.
As you can see, it checks the tags and then extracts the
data using the GetNodeData function.
The ERROR Tag has value when some exceptions occurs on
server side. If an error occurs, the Error Message is displayed in the Error
Label lblError.
Listing 14
function ParseXML(xml)
{
if (xml!=null)
{
var Error = xml.getElementsByTagName('ERROR')[0];
if (Error == null || GetNodeData(Error) == "False")
{
//alert(Grid);
var Pager = xml.getElementsByTagName('PAGER')[0];
var Grid = xml.getElementsByTagName('GRID')[0];
if (Grid != null && Pager!= null)
{
//alert(Grid);
document.getElementById ("dvContent").innerHTML=GetNodeData(Grid);
document.getElementById ("dvPager").innerHTML=GetNodeData(Pager);
}
}
else
{
document.getElementById ("lblError").innerText = GetNodeData(Error);
}
}
}
function GetNodeData(node)
{
return (node.textContent || node.innerText || node.text) ;
}Now I will explain how the paging and sorting requests are
prepared. When you click on the pager hyperlink the PrepareRequest function
prepares the URL by attaching the following query string parameters.
1) SortBy
2) SortOrder
3) Page
4) PageSet
And finally it calls the ReloadData function and passes the
prepared URL to it.
Listing 15
function PrepareRequest(Page, PageSet)
{
var ddlSort = document.getElementById("ddlSort");
var ddlSortOrder = document.getElementById("ddlSortOrder");
if (ddlSort.options[ddlSort.selectedIndex].value == "")
{
ddlSortOrder.options[0].selected = true;
ddlSortOrder.disabled = true;
}
else
{
ddlSortOrder.disabled = false;
}
var url = "Default.aspx?SortBy=" + ddlSort.options[ddlSort.selectedIndex].value + _
"&SortOrder=" + ddlSortOrder.options[ddlSortOrder.selectedIndex].value + "&Page=" _
+ Page + "&PageSet=" + PageSet;
ReloadData(url); 
