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

• Download source and demo - 28.1 KB

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:

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
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.

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.