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

• Download source - 9.71 KB
• Download demo - 28.4 KB
• Download latest demo and source [VS2005] - 44.3 KB

Introduction

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

Benefit

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.

Motivation

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);
 base.Render(buffer);
 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:

style="behavior:behavior:url(dragdrop.htc);"

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.

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

Fixed header

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Everything else will be handled by the custom grid.

Remaining

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

Conclusion

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.