Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 26 Feb 2008
Rate this:
Please Sign up or sign in to vote.
Extension to the ASP.NET GridView control, with built-in client side sorting, column dragging, fixed header etc.


All of the implementation in this article is almost the same as of my previous article: Client Side Sortable DataGird. I have just discussed some implementation differences below.

GridView differences

A DataGrid render its out put as a simple HTML table on the client while the GridView control renders an HTML table wrapped in a DIV tag. I have parsed and made the final output of this custom control highly structured than the MS grid, and it includes an HTML table wrapped by a DIV with the TBODY, THEAD, and TFOOT elements. The DIV is used to provide scrolling for lengthy data, the THEAD maps to the Header template, the TBODY maps to the actual data rows, and the TFOOT maps to the footer of the grid.

When paging is added to the DataGrid control, it displays a pager in the last row in the generated HTML table, but the GridView creates a nested HTML table in the last row main table.

The DataGrid control has an undocumented overridable function, CREATECOLUMNSET, that returns an ArrayList containing the columns that the DataGrid contains:

protected override ArrayList CreateColumnSet(PagedDataSource dataSource, bool useDataSource)

But, the GridView control has a different function named CreateColumns, and it returns an ICollection object.

protected override ICollection CreateColumns(PagedDataSource dataSource, bool useDataSource)

These functions are used by these custom controls for updating the column order according to the last drag drop. This is only the case when the dragging of columns is set to true. The final change that is made for the GridView and the DataGrid is an obsolete function for registering the hidden controls that are replaced with the newer version.

Using the code

Three files are needed in your web application in order for this control to work properly:

  1. Jscript.js
  2. StyleSheet.css

and these files are included in the demo available for download.

You need to provide a reference to the Jscript.js and StyleSheet.css files on the page where you drop this grid. You can optionally modify the Render method of this control to dynamically add these files, by using the following method provided in ASP.NET 2.0.


You need to set a few properties listed below in order to get a fixed header, client side sorting etc.

  • Set EnableClientSort to true to enable client-side sorting for the grid.
  • Set InitialSort to an expression if you want to sort the grid when loaded the first time. During postbacks, the grid will persist and apply user sorting automatically. The format of InitialSort should be like this: 1,ascending or 2,descending, where the number represents the column index to sort and ascending and descending describe the sort direction for the column.
  • Set EnableColumnDrag to true to be able to drag and arrange columns at client-side.
  • Set the Boundary of the grid in order to get a fixed header and auto-scroll functionality. The Boundary property contains the width and the height.
  • Set the DragColor and Hitcolor properties, these colors will be used while dragging and dropping columns at the client.


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

Comments and Discussions

QuestionCould you share code for master page? PinmemberKARTHICKEYANRAJU27-May-14 22:01 
Generalgood work but small problem Pinmemberchiya2vas19-May-10 20:56 
GeneralSome change Pinmemberraza_ahmedt412-Jan-10 22:55 
GeneralProblem in 2 grid in a page Pinmemberhbsim200227-Jul-09 17:32 
GeneralPossible changes to the grid to make it more generic Pinmembergethin stevens12-Nov-08 21:50 
Generalmore than one on a page Pinmemberkiter326-Jun-08 14:15 
GeneralRe: more than one on a page PinmemberMuhammad Abubakar Dar6-Jul-08 19:05 
Generalno boundaries PinmemberMember 376453926-Jun-08 12:59 
QuestionProblem while using with masterpages Pinmembercoolsam_19853-Jun-08 0:56 
AnswerRe: Problem while using with masterpages PinmemberMuhammad Abubakar Dar11-Jun-08 20:46 
AnswerRe: Problem while using with masterpages PinmemberMember 376453926-Jun-08 12:54 
GeneralXml not wel formed PinmemberAndre van Rijswijk17-Mar-08 4:24 
AnswerRe: Xml not wel formed PinmemberMuhammad Abubakar Dar23-Mar-08 21:04 
General[Message Removed] PinmemberMojtaba Vali1-Mar-08 0:01 
GeneralRe: using grid without a datasource PinmemberMuhammad Abubakar Dar10-Mar-08 21:47 
GeneralGood Work Pinmemberrznain27-Feb-08 18:29 
GeneralExcellent Work! PinmemberSufyan_shani26-Feb-08 20:03 
General[Message Removed] PinmemberMojtaba Vali26-Feb-08 17:22 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 26 Feb 2008
Article Copyright 2008 by Muhammad Abubakar Dar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid