Click here to Skip to main content
13,861,876 members
Click here to Skip to main content
Add your own
alternative version


71 bookmarked
Posted 26 Feb 2008
Licenced CPOL

ASP.NET DataGrid Extension [Client Side Sortable/Dragable....] - Part I

, 28 Feb 2008
Rate this:
Please Sign up or sign in to vote.
An extension to the ASP.NET DataGrid control with built-in client side sorting, column dragging, fixed header, check all, uncheck all, highlight selected row, and more...


This control is an extension to the ASP.NET DataGrid control and will provide the following built-in features:

  1. Client side sorting
  2. Drag-able columns client-side (the user can order columns of the gird according to his/her preference)
  3. Selection column (a specialized (extension of the DataGirdColumn) column that also contains a header check box and functionality for 'check all' and 'uncheck all', with no client-side script and no server-side effort)
  4. Fixed grid header
  5. Highlight selected rows
  6. Hover color of rows
  7. Selection status
  8. Printable
  9. Exportable to various formats, and also can be easily configured to any export format due to its polymorphic export design
  10. Print selected rows


Let me explain to you the importance of these enhancements in a grid control by examining the time taken to implement these very common functionalities in a single grid control.

  1. Client side sorting (depending upon the worth of the developer, currently most people are doing it at server-side where each sort needs a server trip).
  2. Select all – Deselect all (needs adding a check box in the form, JavaScript code to handle this operation, and its formatting requirements) - needs almost 2 hours.
  3. Fixed header (needs an identical table at the top of the grid and requires strict formatting according to the grid column; whenever the grid formatting changes, it needs to be changed again) - 2 hours.
  4. Highlight selected row (needs a little JavaScript code) - ½ hr.
  5. Hover row color - ½ hr.

In short, for a single gird, we can save at least 6 hrs., with comparatively lesser error chances and better performance. This also reduces the overall testing effort. In such a way, we can save about 6000 hrs in a 1000 pages distributed application.


In the previous 8 months, during office hours, I was getting sick of doing the above tasks on data grids again and again. All my colleagues were doing the same till now, and were quite alright with this reinventing the wheel practice, but I am not a guy who is happy with this kind of down and dirty work. We (software developers) are usually bound to work in hurry and worry. So, I decided to take over, as I got some free Saturdays, thus I started working on this to give my fellows a broader vision of re usability and .NET.

Implementation and how to use

Client side sorting

The DataGrid control renders a simple HTML table on the client side. We need to modify the HTML generated by the DataGrid control. Start a new Visual Studio® .NET solution and create a sample ASP.NET app, and add a Web control library project. The new DataGrid class should look like this:

[ToolboxData("<{0}:DataGrid runat="\""server\" />")]
public class DataGrid : System.Web.UI.WebControls.DataGrid
  public DataGrid() : base()

Capture the default HTML markup and parse it. The Control.Render method gives the HTML that is going to be generated by that control. You can capture the HTML code generated for a given control, using the following code:

StringWriter writer = new StringWriter();
HtmlTextWriter buffer = new HtmlTextWriter(writer);
string gridMarkup = writer.ToString();

Finally, write the modified markup to the response stream. Any additional attributes can be added here for displaying in the HTML. This is the way you can change the look n feel and behavior of any ASP.NET control according to your will. I have modified the HTML, and formatted it in a more structured HTML table having THEAD, TBODY, and TFOOT.

How to do sorting

The following properties need to be set for enabling client-side sorting of the grid.

  • EnableClientSort - this should be set to true to enable client side sorting.
  • InitialSort - you can optionally set this property, and the format should be zero based column index, ascending/descending. You can ignore this property if you don’t initially want to sort data. Example values for this property are 1, ascending or 3, descending.

Column dragging

To do this, we need to write a kind of DHTML behavior so that we can reuse it over and again. You can go through the wonderful "DHTML Dude" column on MSDN® Online. It discusses ways to revive the HTML table element and how to drag columns around. For more details on DHTM components, please see: Scripting Evolves to a More Powerful Technology: HTML Behaviors in Depth. Again, you need to do the same practice as were for the sort and just need to modify the generated HTML and add a behavior to the table, and that is it. Now, your modified style should be like this, and the rest of the work will be done by this behavior:


How to use column dragging

  • EnableColumnDrag - should be set to true in order to make the columns drag-able.
  • Hitcolor - used while hitting a grid for dragging.
  • Dragcolor - used while dragging.

Custom selection column

For the implementation details of this custom column, you can have a look at one of my previous posts: [Implementing Custom Selection Column], or you can visit my blog for this. All the row selection color, check all, and uncheck all functionalities are built into that column. To add a selection column with check all, uncheck all, and row selection color, you need to add the reference of the assembly in your page that contains the CheckBoxColumn class and add the following snip in your DataGrid columns:

<Columns> <cc1:CheckBoxColumn\> </Columns>

You can optionally bind this column with a data source by specifying the DataField property of this column, and can also provide a row select color and row unselect color.

  <cc1:CheckBoxColumn RowSelectColor="Wheat" RowUnSelectColor="White" \>

Fixed header

You need to add a document type at the top of your aspx page, as follows:


 Transitional//EN" "">

Everything else will be handled by the custom grid.


In part two, I will discuss and implement the remaining features.


This nifty control can save you hours that were used for common formatting, repetitive scripting, and coding by just dragging this control on the page.


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


About the Author

Muhammad Abubakar Dar
Software Developer (Senior) Systems Limited
Pakistan Pakistan
No Biography provided

You may also be interested in...

Comments and Discussions

Questionthe header column should be change size Pin
flash66512-Aug-12 23:27
memberflash66512-Aug-12 23:27 
BugNull reference error? Pin
aploessl23-Jun-11 8:07
memberaploessl23-Jun-11 8:07 
GeneralColumn order does not persist on post back Pin
Dileep GS1-Jun-09 21:25
memberDileep GS1-Jun-09 21:25 
GeneralAwesome grid control Pin
Pham Dinh Truong31-May-09 18:43
memberPham Dinh Truong31-May-09 18:43 
QuestionHow can I use another Grid in the same page Pin
Member 199172621-Sep-08 2:44
memberMember 199172621-Sep-08 2:44 
AnswerRe: How can I use another Grid in the same page Pin
Muhammad Abubakar Dar5-Oct-08 22:03
memberMuhammad Abubakar Dar5-Oct-08 22:03 
GeneralSorting is not working (Numeric) Pin
Martin.Spusta29-Jun-08 18:39
memberMartin.Spusta29-Jun-08 18:39 
GeneralRe: Sorting is not working (Numeric) Pin
Muhammad Abubakar Dar1-Jul-08 21:58
memberMuhammad Abubakar Dar1-Jul-08 21:58 
GeneralGood article.. The sample is not working in firefox Pin
Srinath Gopinath26-May-08 19:28
memberSrinath Gopinath26-May-08 19:28 
GeneralRe: Good article.. The sample is not working in firefox Pin
Gagan111812-Jul-10 9:43
groupGagan111812-Jul-10 9:43 
QuestionColumn Fix...and Row Fix...? Pin
newleader8827-Apr-08 19:35
membernewleader8827-Apr-08 19:35 
GeneralReally very nice - how about row sorting vs column sorting Pin
bevans197519-Mar-08 4:11
memberbevans197519-Mar-08 4:11 
GeneralGreate job!! I hope you next article implement adjust column width. Pin
guaike15-Mar-08 4:15
memberguaike15-Mar-08 4:15 
AnswerRe: Greate job!! I hope you next article implement adjust column width. Pin
Muhammad Abubakar Dar15-Mar-08 21:36
memberMuhammad Abubakar Dar15-Mar-08 21:36 
GeneralRe: Greate job!! I hope you next article implement adjust column width. Pin
guaike16-Mar-08 3:37
memberguaike16-Mar-08 3:37 
GeneralError in HTML Rendering Pin
Ranman14-Mar-08 2:24
memberRanman14-Mar-08 2:24 
GeneralRe: Error in HTML Rendering Pin
Ranman14-Mar-08 4:08
memberRanman14-Mar-08 4:08 
GeneralManipulating rows in the client side Pin
Xavito9-Mar-08 21:11
memberXavito9-Mar-08 21:11 
AnswerRe: Manipulating rows in the client side Pin
Muhammad Abubakar Dar10-Mar-08 22:29
memberMuhammad Abubakar Dar10-Mar-08 22:29 
GeneralRe: Manipulating rows in the client side Pin
Xavito11-Mar-08 6:00
memberXavito11-Mar-08 6:00 
GeneralSOunds Great Pin
Tanmay Broachwala4-Mar-08 3:01
memberTanmay Broachwala4-Mar-08 3:01 
AnswerRe: SOunds Great Pin
Muhammad Abubakar Dar10-Mar-08 22:22
memberMuhammad Abubakar Dar10-Mar-08 22:22 
GeneralGreate job!! Pin
Sufyan_shani27-Feb-08 1:44
memberSufyan_shani27-Feb-08 1:44 
GeneralGood Work .......... Pin
MNaveedAhmad26-Feb-08 20:48
memberMNaveedAhmad26-Feb-08 20:48 
GeneralGreat Article... Pin
matrika26-Feb-08 20:26
membermatrika26-Feb-08 20:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.190214.1 | Last Updated 28 Feb 2008
Article Copyright 2008 by Muhammad Abubakar Dar
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid