Click here to Skip to main content
Click here to Skip to main content
Add your own
alternative version

AJAX Demystified - Part Two - The AJAX DataGrid

, 21 Jun 2007 CPOL
Create an AJAX DataGrid that binds, sorts and pages with no post-backs
var obj;

// Creates the XMLHTTP Request object
function getXMLHTTPRequest()
{
	var xRequest=null;
	if (window.XMLHttpRequest)
	{
		xRequest = new XMLHttpRequest();
	}
	else if (typeof ActiveXObject != "undefined")
	{
		xRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xRequest;
}

// Performs a GET to our processSQL.aspx web page with the query
function sendRequest()
{
	obj=getXMLHTTPRequest();
	if (obj!=null)
	{
	    var query = document.getElementById("txtQuery").value;
	    var rows = document.getElementById("txtRows").value;
		obj.onreadystatechange = processResponse;
		obj.open("GET","http://localhost/ajaxDG/processSQL.aspx?query="+escape(query)+"&rows="+rows,true);
		obj.send(null);
	}
	return false;
}

// Process the HTTP Response when it is complete
function processResponse()
{
	if (obj.readyState == 4)
	{
		if (obj.status == 200)
		{
			var retval=obj.responseText;
			if (document.getElementById("results")!=null)
			{
				document.getElementById("results").innerHTML = retval;
			}
			else
			{
				alert("Error retrieving data!");
			}
		}
	}
}

// Send the query and parameters to the server side script for processing
function generateGrid()
{
	obj=getXMLHTTPRequest();
	if (obj!=null)
	{
	    var query = document.getElementById("txtQuery").value;
	    var rows = document.getElementById("txtRows").value;
	    var sortExpr = document.getElementById("txtSort").value;
	    var page = document.getElementById("txtPage").value;
		obj.onreadystatechange = processResponse;
		obj.open("GET","http://localhost/ajaxDG/processSQL.aspx?query="+escape(query)+"&rows="+rows+"&gridpage="+page+"&expression="+sortExpr,true);
		obj.send(null);
	}
	return false;
}

// Called when a column header is clicked
function sortGrid(sortExpr)
{
	document.getElementById("txtSort").value = sortExpr;
	generateGrid();
}

// Called when the grid is paged
function pageGrid(page)
{
	document.getElementById("txtPage").value = page;
	generateGrid();
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

UsualDosage
Architect
United States United States
I have been an ASP.NET/C# Programmer/Software Architect for about 10 years, specializing in web architecture, user interface, and user experience. I formerly wrote business applications for mortgage banking front-ends in C++ before switching to the .NET Framework many years ago, and I've never looked back. I'm an evangelist of HTML5 and web standards, and spend the majority of my time working on front end design, performance and scale.

My primary website is located at http://www.usualdosage.com

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150327.1 | Last Updated 21 Jun 2007
Article Copyright 2006 by UsualDosage
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid