Show/hide the column header of the GridView in asp.net

Introduction:

This article demonstrates how to enable users to display/hide the columns in the GridView they need. This is very useful because not all columns in the GridView need it. users want to view the desired columns according to their needs. instead of displaying a huge gridview, it occupies the whole screen, but a neat Gridview, and it has all the columns you need. this is also a very useful technology for page printing, because you can flexibly select the column printing of the GridView.

Background:

RowCreated and ItemDataBound events allow you to inject HTML, CSS, and JavaScript in multiple ways to enhance the functions of the GridView control.

Application Example:

This is an example of a task management system. It may not always display the "ID" column of the task. When printing the task list, you may not need the "Assigned To" column.

The following is a displayed Gridview with only four columns.



By clicking the negative number in the column header, you can hide a column. In, the "Id" column is hidden.



Hide Column to be visible again by selecting the "Show Column" drop-down menu to Show it. When a Column is hidden, it will appear at the first position in "Show Column.

The following is a preview on a page where the ID is a hidden column:



This article will demonstrate two methods to display and hide the GridView column. One is the client method and the other is the service segment method.

Display and hide the columns of the GridView in the customer segment

Most of the code is used to generate the client function in the RowCreated event of the GridView. When the Header row of the GridView is created, a negative HyperLink is inserted into cells of each Header row to hide columns. This hyperlink calls a HideCol Javascript method through its onclick event. The CSS class is used to increase the negative number. When each data row is created, an Id will be added to each line for Javascript to differentiate each line.

Code
Protected void GridView1_RowCreated (object sender, GridViewRowEventArgs e)
{
GridView gridView = (GridView) sender;
StringBuilder sb = new StringBuilder ();

// For the header row add a link to each header
// Cell which can call the HideCol javascript method
If (e. Row. RowType = DataControlRowType. Header)
{
// Loop through each cell of the row
For (int columnIndex = 0; columnIndex <e. Row. Cells. Count; columnIndex ++)
{
// Build the hide column link
Sb. Remove (0, sb. Length); // first empty the StringBuilder
Sb. Append ("javascript: HideCol ('");
Sb. Append (gridView. ClientID );
Sb. Append ("',");
Sb. Append (columnIndex );
Sb. Append (",'");
Sb. Append (columnNames [columnIndex]);
Sb. Append ("');");

// Build the "Hide Column" HyperLink control
HyperLink hideLink = new HyperLink ();
HideLink. Text = "-";
HideLink. CssClass = "gvHideColLink ";
HideLink. NavigateUrl = sb. ToString ();
HideLink. Attributes. Add ("title", "Hide Column ");

// Add the "Hide Column" HyperLink to the header cell
E. Row. Cells [columnIndex]. Controls. AddAt (0, hideLink );

// If there is column header text then
// Add it back to the header cell as a label
If (e. Row. Cells [columnIndex]. Text. Length> 0)
{
Label columnTextLabel = new Label ();
ColumnTextLabel. Text = e. Row. Cells [columnIndex]. Text;
E. Row. Cells [columnIndex]. Controls. Add (columnTextLabel );
}
}
}

// Give each row an id
If (e. Row. RowType = DataControlRowType. Pager)
E. Row. Attributes. Add ("id", gridView. ClientID + "_ pager ");
Else
E. Row. Attributes. Add ("id", gridView. ClientID + "_ r" + e. Row. RowIndex. ToString ());
}

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page