Introduction

This article demonstrates how to give users the ability to show or hide GridView columns as they require. This can be useful if there are some columns in a GridView which are not always required by all users; these could be hidden by default, and easily made visible by the users who require them. Rather than display a large GridView which goes off the screen, you can have a neat GridView which still has all of the required columns. It is also a useful technique for a report type page where users have the flexibility to choose which GridView columns are printed.

Background

The RowCreated and ItemDataBound events allow you to inject HTML, CSS, and JavaScript to enhance the GridView control in any number of ways. These two articles also use similar principals:

The Sample Application

In the sample Task Management application, it may not always be necessary to display the task "Id" column, or when printing a Task report, a user may not want to print the "Assigned To" column.

Here is a basic GridView showing four columns:

By clicking on the minus symbol in a column header, a user can hide a column; in this case, the "Id" column is hidden:

A hidden column can be made visible again by selecting the column name from the "Show Column" drop down list, which appears when the first column is hidden.

Here is a Print Preview of the same page with the Id column hidden:

This article will demonstrate two methods of showing and hiding GridView columns, one on the client side and one on the server side.

Show / Hide GridView Columns on the Client Side

Most of the code for generating the client side functionality is in the GridView's RowCreated event. When the GridView header row is created, a HyperLink control with a minus symbol is inserted into each header cell for hiding that column. The hyperlink will call a JavaScript method called HideCol from its onclick event. A CSS class is also applied to increase the size of the minus symbol. As each DataRow is being created, an Id is added to each row so that it can be identified by the JavaScript.

After the data has been bound to the GridView, the remainder of the work is done by the JavaScript in the ShowHideColumns.js file. When a hyperlink in a column header is clicked, it passes the GridView name, column index, and column name to the HideCol JavaScript method which can then find each table cell in that column. The style of each cell is modified by adding a display:none; style to the cell, hiding the column.

When an option is selected from the "Show Column" drop down list, the ShowCol JavaScript method is called, which removes the display:none; style from each cell in the column, displaying it again.

Show / Hide GridView Columns on the Server Side

The server side example also uses the RowCreated event to add a minus symbol to the column headers, this time as a LinkButton control. The CommandName and CommandArgument properties are setup so that when the LinkButton raises the RowCommand event, the associated column can be hidden. Previously hidden column indexes are stored in a List<int>, and these columns are hidden as the row is being created.

Share

About the Author

I have been designing and developing business solutions for the aviation and telecommunications industries since 1999. My experience covers a wide range of technologies and I have delivered a variety of web and mobile based solutions.

I can't seem to make this work with paging (allowpaging=true). When I use the client implementation, changing pages unhides any columns I've hidden. When I used the server implementation, there were problems as well.

Your code works like charm, thanks for this.
But i have one query related to it.
I am also using filters in my website & it needs AUTOPOSTBACK true so whenever anyone use filter, hidden gridview columns comes on its original position, so hw to solve this problem ???
Please reply me on my email : Jeetenfriend@gmail.com

Note for New developers : never ever hide columns of gridview on dropdownlist selected index changed , If its done then rowupdate event doesnot fire, I was stuck from past 2 days and atlast after loads of googling came to this procedure and thats solved my issue.