ASP.NET DataGrid - Custom Control That Sorts On Form Elements Client Side By Robbe D. Morris Printer Friendly Version

Robbe & Melisa Morris

Download C# Source Code
In 2002, I put together a JavaScript Sortable DataGrid Control that could be used in classic ASP as well as ASP.NET pages.  The JavaScript Sortable DataGrid Control creates a 100% client side JavaScript solution for a cross-browser based sortable grid.  The idea being that the user would not have to wait for a page reload each time the sort was adjusted or process another query on the server.  To provide further complexity, the ability to include certain form elements and sort on them was also required.
As you can imagine, the process of handling dropdown lists, input boxes, checkboxes, images, hyperlinks, and general text comes with a fair amount of complexity.  Since that article was written, I opted to write a C# wrapper class to provide a much simpler interface to the DataGrid control (as well as fix a couple of bugs) and am making the source code available to you today.    I also had a need to provide a solution that could work in both the code-behind and non code-behind environments.  Thus, this isn't a typical server control.  Let's take a look at the demo below:
This control has been accepted by our user community as a major improvement to our old DataGrid that required page reloads.  Here is a small demo of a DataGrid that sorts hyperlinks, drop down lists, checkboxes, input boxes, and general text.  It also includes a few examples of how to trigger custom JavaScript events where necessary.  Once you get used to using the class, I think you'll find it to be fairly powerful and flexible.  The source code for this grid is broken out into three separate files: grid.cs, javascript.cs, and utilities.cs.
1.	grid.cs
	This class is the public interface to your ASP.NET page.  It contains all the methods and enums to init the DataGrid, create column headers, add rows based on specific HTML or form element requirements, and generate the appropriate JavaScript.
2.	javascript.cs
	This is an internal class that does nothing but dynamically generate the correct JavaScript code for the DataGrid based on methods called from the grid.cs class.  Currently, this grid does its sorting as a string Sort.  Feel free to add additional sorting methods as needed.
3.	utilities.cs
	Internal class with a few general utilities to massage strings.
Please take a moment to rate this article (opens new browser window).  Rate Article
In the following zip file, I've included the complete C# project and a script only grid.aspx page that demonstrates how to use the wrapper class.  Just compile the project to your /bin folder and then browse to grid.aspx.  Feel free to download the C# source code zip file: download
The original JavaScript source code for this control can be found here: JavaScript Source Code.

	Robbe has been a Microsoft MVP in C# since 2004.  He is also the co-founder of EggHeadCafe which provides .NET articles, book reviews, software reviews, and software download and purchase advice.