Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET
Article

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

Rate me:
Please Sign up or sign in to vote.
4.35/5 (8 votes)
26 Feb 2008CPOL3 min read 79K   901   43   19
Extension to the ASP.NET GridView control, with built-in client side sorting, column dragging, fixed header etc.

Image 1

Introduction

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:

C#
protected override ArrayList CreateColumnSet(PagedDataSource dataSource, bool useDataSource)
{
     .
     .
     .
}

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

C#
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
  3. Dragdrop.htc

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.

C#
Page.ClientScript.RegisterClientScriptInclude

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.

License

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


Written By
Software Developer (Senior) Systems Limited
Pakistan Pakistan
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionCould you share code for master page? Pin
KARTHICKEYANRAJU27-May-14 22:01
KARTHICKEYANRAJU27-May-14 22:01 
Generalgood work but small problem Pin
chiya2vas19-May-10 20:56
chiya2vas19-May-10 20:56 
GeneralSome change Pin
raza_ahmedt412-Jan-10 22:55
raza_ahmedt412-Jan-10 22:55 
GeneralFiltering gridview records with text box and dropdown Pin
Member 105843971-Jun-16 22:55
Member 105843971-Jun-16 22:55 
GeneralProblem in 2 grid in a page Pin
hbsim200227-Jul-09 17:32
hbsim200227-Jul-09 17:32 
GeneralPossible changes to the grid to make it more generic Pin
gethin stevens12-Nov-08 21:50
gethin stevens12-Nov-08 21:50 
Generalmore than one on a page Pin
kiter326-Jun-08 14:15
kiter326-Jun-08 14:15 
GeneralRe: more than one on a page Pin
Muhammad Abubakar Dar6-Jul-08 19:05
Muhammad Abubakar Dar6-Jul-08 19:05 
Generalno boundaries Pin
kiter326-Jun-08 12:59
kiter326-Jun-08 12:59 
QuestionProblem while using with masterpages Pin
coolsam_19853-Jun-08 0:56
coolsam_19853-Jun-08 0:56 
AnswerRe: Problem while using with masterpages Pin
Muhammad Abubakar Dar11-Jun-08 20:46
Muhammad Abubakar Dar11-Jun-08 20:46 
AnswerRe: Problem while using with masterpages Pin
kiter326-Jun-08 12:54
kiter326-Jun-08 12:54 
GeneralXml not wel formed Pin
Andre van Rijswijk17-Mar-08 4:24
Andre van Rijswijk17-Mar-08 4:24 
AnswerRe: Xml not wel formed Pin
Muhammad Abubakar Dar23-Mar-08 21:04
Muhammad Abubakar Dar23-Mar-08 21:04 
General[Message Removed] Pin
Mojtaba Vali1-Mar-08 0:01
Mojtaba Vali1-Mar-08 0:01 
GeneralRe: using grid without a datasource Pin
Muhammad Abubakar Dar10-Mar-08 21:47
Muhammad Abubakar Dar10-Mar-08 21:47 
GeneralGood Work Pin
rznain27-Feb-08 18:29
rznain27-Feb-08 18:29 
GeneralExcellent Work! Pin
Sufyan_shani26-Feb-08 20:03
Sufyan_shani26-Feb-08 20:03 
General[Message Removed] Pin
Mojtaba Vali26-Feb-08 17:22
Mojtaba Vali26-Feb-08 17:22 

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.