Introduction
This control is an extension to the ASP.NET DataGrid control and will provide the following built-in features:
- Client side sorting
- Drag-able columns client-side (the user can order columns of the gird according to his/her preference)
- 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)
- Fixed grid header
- Highlight selected rows
- Hover color of rows
- Selection status
- Printable
- Exportable to various formats, and also can be easily configured to any export format due to its polymorphic export design
- 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.
- 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).
- 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.
- 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.
- Highlight selected row (needs a little JavaScript code) - ½ hr.
- 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.
|
|
 |
 | Column order does not persist on post back
Dileep GS | 21:25 1 Jun '09 |
|
|
What a fantastic control, congrats Muhammed. I have been looking for something like this for more than one week. My requirement is to drag column on client side and the column order should persist on post back also. In this control it is maintaining the column order on pagination. But when I put one button in the page and click on that, and when the page postback, only the column name persist its position and not the data. The data in the column returns to its previous position on postback. Problem is when the column data comes back and column name persist its position, wrong data will be shown against the column name.
|
|
|
|
|
| Awesome grid control
truongpham | 18:43 31 May '09 |
|
|
This control is awesome! Thanks buddy for sharing what I am looking for
|
|
|
|
|
 | How can I use another Grid in the same page
Member 1991726 | 2:44 21 Sep '08 |
|
|
Hi,
The grid is working perfectly for me. I feel pleasure to work with the grid  . I'm using two grids in the same page, for this the first grid is working fine with the given code, but for the second grid not all the code is working. Could you please give solution to work many grids(atleast 2 grids) in the same page..
Sorry for my bad english.. 
Regards,
-- Rajan --
|
|
|
|
|
|
|
Rajan,
You need to make a little change in class library source.
For DataGrid open up DataGridx.cs and find "InitilizeGrid" replace this string with "InitilizeGrid_"+this.ClientID.
Do the same in GridViewx.cs for DataGridView.
Now you can use as many grids as you want.
Thanks.
Muhammad Abubakar Dar.
|
|
|
|
|
| Sorting is not working (Numeric)
Martin.Spusta | 18:39 29 Jun '08 |
|
|
The sort is always using STRING sorting. How can we implement numeric or date sorting?
|
|
|
|
|
|
|
Martin,
You are right. Little modification is required if you can.
Open up DataGridx.cs.Go to function CreateColumnSet, there is a loop that build up sorting type for each column of grid. In Switch statement provide 'N' for numeric column if you want numeric sorting.
Let me know in case of any concerns.
Regards,
Muhammad Abubakar Dar.
|
|
|
|
|
| Good article.. The sample is not working in firefox
srinath g nath | 19:28 26 May '08 |
|
|
Good article. This is not working in firefox browser.
|
|
|
|
|
| Column Fix...and Row Fix...?
newleader88 | 19:35 27 Apr '08 |
|
|
This is very excellent article. I wonder how fix column and fix rows? like as Excel spreadsheet. Plz give me hints.....?
|
|
|
|
|
| Really very nice - how about row sorting vs column sorting
bevans1975 | 4:11 19 Mar '08 |
|
|
I like your example and got it working in a few minutes. I was wondering if there is a way to select an entire row in a datagrid and change its order by moving it up and down?
|
|
|
|
|
| Greate job!! I hope you next article implement adjust column width.
guaike | 4:15 15 Mar '08 |
|
|
That's so cool,thank you!
I hope you next article implement dynamic adjust column width,
and dynamic cut off some string when the text over the current column's width and display "..."
Jim.
|
|
|
|
|
|
|
thanks guaike,
i will do it for you and also will add functionality of formating of Numeric columns and string columns means numeric column will be aligned right and string will left by the grid.keep in tuch
regards,
Muhammad Abubakar Dar
|
|
|
|
|
|
|
Thanks again!
That's perfect!
|
|
|
|
|
| Error in HTML Rendering
Ranman | 2:24 14 Mar '08 |
|
|
Nice Control but,
the Class GridViewx renders itself not correctly!
GridViewx.cs Line 355 - 358 the RegEx is not set Correct. Please change it like this
Regex rth = new Regex("<th\\s[^>]*>");
gridMarkup=rth.Replace(gridMarkup, "<td>");
rth = new Regex("</th>");
gridMarkup = rth.Replace(gridMarkup, "</td>");
|
|
|
|
|
|
|
And
GridViewx.cs Line 318 - 343 the Appends are not Correct, they always add a not needed "<tr>". Please change it like this
if (s.Length > 0)
{
if (i == trs.Length - 1)
{
string[] sTables = rTable.Split(s);
if (sTables.Length > 2)
sb.AppendFormat("<tr>{0} </table>{1} </tfoot></table> {2}", sTables[0], sTables[1], sTables[2]);
else
{
sb.Replace("</tbody><tfoot>", "");
sb.AppendFormat("<tr>{0}</tbody></table>{1}", sTables[0], sTables[1]);
}
}
else if (i != insertBeginTag)
{
sb.Append(s);
}
else if (i == insertBeginTag)
{
sb.AppendFormat("</tbody><tfoot>{0}", s);
}
}
|
|
|
|
|
| Manipulating rows in the client side
Xavito | 21:11 9 Mar '08 |
|
|
Hello, this was a good article.
Can you tell me if I can client-side manipulate rows in the ASPNET Grid ?
Let me explain myself, I'd like to add and remove rows in the client side (javascript), no round trips to the server, is that possible in the standard ASP.NET grid ?
After adding rows, I'd like to perform a simple validation against an XML data source or something like this, and then (just then) sending it back to the server.
Thanks a lot.
BR,
Francisco Rodriguez
|
|
|
|
|
|
|
Rodriguez,
Default behavior of ASP.NET grid doesn't allow addition of new rows on client.You have to do some custom coding for this or you can use infragistics controls.
|
|
|
|
|
|
|
I'm using the Infragistics grid but I just wanted to be sure about the capabilities of the standard ASP.NET Grid.
Thanks a lot.
BR,
|
|
|
|
|
| SOunds Great
Tanmay Broachwala | 3:01 4 Mar '08 |
|
|
Do you have any live demonstration uploaded somewhere???
|
|
|
|
|
|
|
Tanmay,
Just download LatestDemoandSourceVS2005.zip, it will work without any configuration.Currently i don't have any live demo  .
you can mail me if u unable to run sample.
thanks for your contribution.
|
|
|
|
|
| Greate job!!
Sufyan_shani | 1:44 27 Feb '08 |
|
|
full marks...
Shani
ASP.NET 2.0
S/W Engineer
|
|
|
|
|
| Good Work ..........
naveedilm | 20:48 26 Feb '08 |
|
|
Dar! you have done a good job. keep it up. industry need guys like U.
|
|
|
|
|
| Great Article...
.NetRev | 20:26 26 Feb '08 |
|
|
This article is great...Keep it up
matrix
|
|
|
|
|
|
|
Last Updated 28 Feb 2008 |
Advertise |
Privacy |
Terms of Use |
Copyright ©
CodeProject, 1999-2010
