The DataGrid allows you to make columns visible or invisible on demand
- even edit and other special columns. This article will show you how
it is done.
Some developers have reported problems controlling the visibility of
columns in the DataGrid control. The problem usually comes down to one
fact. The DataGrid has a property called AutoGenerateCol umns. The
default value is "True". This means that when AutoGenerateCol umns is
set to True, the DataGrid will pull its column headings straight from
the column names of the database table. If you allow this to happen
you cannot control the visibility of the columns. You must use
asp:BoundColumn s and specify the HeaderText and Datafield properties
in your DataGrid setup. This relatively simple change allows you
accomplish the hiding and showing of columns as you wish. It also
works with Edit and other special columns as you will see.
First, lets look at the html code in our .aspx page. Immediately below
the
tag we have two buttons and set OnClick event handlers to two
subroutines which will do the work of hiding and showing the
appropriate columns in our code-behind file. In the DataGrid code,
notice that AutoGenerateCol umns is set to "False". Also notice that we
have used asp:BoundColumn s to set our HeaderText and DataFields. I
have also set the Visible property to false so that nothing but the
CompanyName column will be shown at startup. I have also added an Edit
column although I did not wire it up to actually do any editing (the
copy of the Customers table in the Northwind database I am using is
readonly anyway). After the bound columns are some other datagrid
properties just to make the grid look good.
AutoGenerateCol umns="False"
BorderColor="#9 99999"
BorderStyle="No ne"
BorderWidth="1p x"
BackColor="Whit e"
CellPadding="3"
GridLines="Vert ical">
Now for the code-behind file which is shown in two parts. The first
part displayed below is just the usual page_load event which calls a
"BindTheDat a" routine to actually get the data from the Customers
table. All of this should be self explanatory.
Imports System.Data
Imports System.Data.Sql Client
Imports System.Configur ation
Public Class ShowHideCols : Inherits System.Web.UI.P age
Protected btnShow As System.Web.UI.W ebControls.Butt on
Protected btnHide As System.Web.UI.W ebControls.Butt on
Protected dtgCusts As System.Web.UI.W ebControls.Data Grid
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArg s) Handles MyBase.Load
If Not IsPostBack Then
BindTheData
End If
End Sub
Sub BindTheData
Dim objConn As SqlConnection
Dim objCmd As SqlCommand
objConn = New SqlConnection(C onfigurationSet tings.AppSettin gs("NorthwindCo nnection"))
Dim strSql As String
strSql = "SELECT Top 10 CompanyName, ContactName, ContactTitle,
City, Country, Phone FROM Customers"
objCmd = New SqlCommand(strS ql, objConn)
objConn.Open
dtgCusts.DataSo urce = objCmd.ExecuteR eader()
dtgCusts.DataBi nd()
objConn.Close()
objConn.Dispose ()
End Sub
Lastly comes our two subroutines to handle the showing and hiding of
the columns in the grid other than Company Name. Since Company Name is
Column(0), these routines use a simple For...Next loop to cycle
through the remaining columns setting the visible property to true or
false as appropriate.
Sub ShowDetails(sen der As System.Object, e As System.EventArg s)
Dim intCounter As Integer
For intCounter = 1 to dtgCusts.Column s.Count - 1
dtgCusts.Column s(intCounter).V isible = True
Next
End Sub
Sub HideDetails(sen der As System.Object, e As System.EventArg s)
Dim intCounter As Integer
For intCounter = 1 to dtgCusts.Column s.Count - 1
dtgCusts.Column s(intCounter).V isible = False
Next
End Sub
End Class
There you have it. A simple way to control the visible property of
your DataGrid columns.
AMBER [MCSD.NET MCAD.NET] http://www.dedicatedsolutions.co.uk