Home Page

Click here to download the source code for this lesson.

Normally when you use a GridView control, it will show all the columns in the associated DataSource.  For example, in my prior post I executed a query to retrieve all the columns from the Customer table: “select * from Customer”.  The results of that query were saved in a DataSet variable called dbdata.  I then assigned dbdata to the DataSource property of my GridView control.  When I run the application, the GridView shows all the columns.  The GridView also displays the column names as the header for the grid on the web page.

In a real world scenario, you probably are going to need more control over what is displayed in your grid.  The way to achieve this is to set the AutoGenerateColumns property of the GridView to False.  When you do this, it lets ASP.NET know that you are going to manually define how you want the data displayed in your grid.  After you set that property to False, you then have to define each display field, one by one.  This is pretty easy to do since Visual Web Developer has an interface that lets you control all of the display fields for the grid.  Open your .aspx page in Design view and then put your cursor over the GridView control that is on your form.  You will see a little button with a “>” symbol on it.  Click on that to see the GridView Tasks window.  Click on the “Edit Columns…” option to bring up the Fields window.

In the Fields window, you can add new BoundFields to the grid.  A BoundField means that you are creating a display field that is “bound” to a column in the DataSource.  Think of binding like connecting a visual item on a web page to a data item coming from a database.  This is why the GridView control is considered to be a data bound server control.  In my example code I created two display fields and bound them to two columns in my DataSet: first_name and last_name respectively.  I also set the HeaderText property for each bound field to: “First Name” and “Last Name” respectively.  The HeaderText property gives you the ability to control what shows up as the header for each grid column.  Notice that even though my query is returning more than two columns from the database table, I am only showing two of them on the web page.

One last tip that I will close the lesson with is that you can also go to Source view of your .aspx page and manipulate the columns of the GridView from there.  That comes in handy sometimes if you want to add a new BoundField.  You can copy and paste one of the existing BoundFields and then change the properties for the newly added field.

Click here to watch a video that shows how to show or hide columns in an ASP.NET GridView control.

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment