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.
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
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.
DataGrid control has an undocumented overridable function,
CREATECOLUMNSET, that returns an
ArrayList containing the columns that the
protected override ArrayList CreateColumnSet(PagedDataSource dataSource, bool useDataSource)
GridView control has a different function named
CreateColumns, and it returns an
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:
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.
true to enable client-side sorting for the grid.
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.
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
Hitcolor properties, these colors will be used while dragging and dropping columns at the client.