Hiding Columns In A DataGrid
Click here to return to my article index
One of the frequently asked questions over at the ASPAlliance Lists is: "How do I
hide a column in a datagrid?". One very important point to note is that you cannot hide autogenerated columns in a data grid.
The reason for this is that autogenerated columns are not added to the DataGrid's DataGridColumn collection. So, in order for
a column to be hidden it must be either programmatically added to the DataGrid at runtime or explicitly defined
(using templates) at design time with the AutoGenerateColumns property set to false (the code in this article will use this
method).
This article provides sample code to hide a column (could easily be modified to hide more) for two different scenarios
- hiding columns in response to an event on the page (common in web reports) or hiding columns to provide different
functionality based on security levels.
The code sample below also uses a few best pratices you should understand and be aware of:
*The code below uses structured error handling techniques in the form of the Try...Catch statement. Go here
to read more about the great new structured error handling we VBers now have.
*The code below also uses a connection string stored in a web.config configuration file. Go here to read more about
the web.config configuration file and how it can be used to store application wide data.
*The code below also follows proper database resouce management per this best practice.
First, let's look at how we can hide and show a column in a DataGrid in response to an event (the click of a button) on
the page. You can see a live example here.
The code:
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<script runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
Dim myConnection As SqlConnection = new SqlConnection(ConfigurationSettings.AppSettings("DSN_pubs"))
Dim myCommand As SqlCommand = new SqlCommand("Select * From Publishers", myConnection)
Dim myDataReader As SqlDataReader
Try
myConnection.Open()
myDataReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
myDataGrid.DataSource = myDataReader
myDataGrid.DataBind()
Catch myException As Exception
Response.Write("An error has occurred: " & myException.ToString())
Finally
If Not myDataReader Is Nothing Then
myDataReader.Close()
End If
End Try
End Sub
Sub HideShow_Click(Sender As Object, E As EventArgs)
If myDataGrid.Columns(0).Visible = False Then
myDataGrid.Columns(0).Visible = True
Else
myDataGrid.Columns(0).Visible = False
End If
End Sub
</script>
<body>
<form runat="server">
<asp:DataGrid id="myDataGrid" Width="25%" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn HeaderText="Publisher's ID">
<ItemTemplate>
<span><%# Container.DataItem("pub_id") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Publisher's Name">
<ItemTemplate>
<span><%# Container.DataItem("pub_name") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="City">
<ItemTemplate>
<span><%# Container.DataItem("city") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="State">
<ItemTemplate>
<span><%# Container.DataItem("state") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Country">
<ItemTemplate>
<span><%# Container.DataItem("country") %></span>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<asp:Button id="HideShow" Text="Hide/Show" OnClick="HideShow_Click" runat="server" />
</form>
</body>
</html>
Next, let's look at how we can hide a column in a DataGrid based on the security level of the user. This example is not *actually*
secure and security is not discussed in this article - we are trying to show how to hide DataGrid columns not how to
secure a page! The code below checks a Querystring parameter called 'Security' each time the page loads. If 'Security'
equals "Admin" then all of the columns are displayed. If 'Security' equals anything other than "Admin" then the first column
in the DataGrid is hidden.
Click here to view the DataGrid with no priveleges. (No pub_id column)
Click here to view the DataGrid with Admin priveleges. (All columns visible)
The code:
<%@ Page Language="VB"%>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<script runat="server">
Sub Page_Load(Sender As Object, E As EventArgs)
Dim myConnection As SqlConnection = new SqlConnection(ConfigurationSettings.AppSettings("DSN_pubs"))
Dim myCommand As SqlCommand = new SqlCommand("Select * From Publishers", myConnection)
Dim myDataReader As SqlDataReader
Try
myConnection.Open()
myDataReader = myCommand.ExecuteReader(CommandBehavior.CloseConnection)
myDataGrid.DataSource = myDataReader
myDataGrid.DataBind()
Catch myException As Exception
Response.Write("An error has occurred: " & myException.ToString())
Finally
If Not myDataReader Is Nothing Then
myDataReader.Close()
End If
End Try
If Request.QueryString("Security") = "Admin" Then
myDataGrid.Columns(0).Visible = False
End If
End Sub
</script>
<body>
<form runat="server">
<asp:DataGrid id="myDataGrid" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:TemplateColumn HeaderText="Publisher's ID">
<ItemTemplate>
<span><%# Container.DataItem("pub_id") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Publisher's Name">
<ItemTemplate>
<span><%# Container.DataItem("pub_name") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="City">
<ItemTemplate>
<span><%# Container.DataItem("city") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="State">
<ItemTemplate>
<span><%# Container.DataItem("state") %></span>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Country">
<ItemTemplate>
<span><%# Container.DataItem("country") %></span>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</html>
For more information about Hiding/Modifying bound data check out Steve Smith's article "ASP.NET Hiding DataBound Items".
Related Articles:
Creating a simple custom DataGrid
How to add a confirmation popup to a DataGrid
Adding dynamic content to a DataGrid Footer
| 
