An Extensive Examination of the DataGrid Web Control: Part 3By Scott Mitchell
|The Third Part in a Multi-Part Series|
This article is the third piece of a multi-part series on using the DataGrid Web control that will span
several weeks. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
This article will examine how to associate custom events with the DataGrid.
In Part 1 we examined the elementary basics of the DataGrid, an ASP.NET Web control designed to display data in an HTML table tag, showing how simple it was to display database contents through an ASP.NET Web page. Part 2 examined how to customize the look of the resulting DataGrid. As we saw in a live demo, with very little programmatic code we could display database information in a very impressive format.
While displaying data is nice and all, what would really be useful is if we could associate some sort of action with the DataGrid. For example, imagine that we worked for some eCommerce firm and were asked to display a DataGrid showing the data for the list of all orders. Each order might have a large amount of data associated with it, including the item purchased, the date purchased, information about the buyer (name, address, etc.), what shipping options the buyer chose, etc. Showing all of this information in a single DataGrid (for every order) would be information overload.
As we saw in Part 2, we could use simply set
AutoGenerateColumns to False and then use the
Columns property to specify what columns from the order information we wanted to display.
While this would make the data easier to digest, what if the user wanted to also have the option to
view the intricate details of any particular order? Ideally we'd like to be able to have on each row
in the DataGrid a button labeled "Details" that, when clicked, would display the complete information
for that particular order.
The live demos in this article step through a very similar application. In our previous live demos we were displaying the top 10 most popular FAQs from ASPFAQs.com. In this article we'll extend the live demo to show only the most important information for each of the 10 most popular FAQs along with a "Details" button. When the "Details" button is clicked, the user will see all of the information for the FAQ they clicked the "Details" button on.
Building on a Foundation
As we saw in Part 2, the DataGrid control allows for a number of
BoundColumntags in the
Columnstag of the DataGrid control. Recall that each
BoundColumntag represents a column in the resulting DataGrid. To place a button in the DataGrid we can use the
ButtonColumntag much in the same way as we used the
BoundColumntags. The following source code shows how to place a button in a DataGrid:
Note that to get this to work we needed to place the DataGrid within a server-side form (the
<form runat="server"> shown above). This is because in order to track the
button that was clicked and the associated action that should occur, the ASP.NET page needs to
be able to reconstruct the page and series of buttons in the DataGrid. To do this it needs the page's
ViewState. A thorough discussion of ViewState is beyond the scope of this article; for
more information read: Form Viewstate.
Note that the button created by the live demo is a textual link
button. This is the default appearance generated by the
ButtonColumn class. If you
want to display a standard button, you can simply specify:
ButtonType="PushButton" in the
ButtonColumn tag. The
ButtonColumn class has a number of important properties.
Two of the stylistic ones are used in the code sample above.
HeaderText specifies the text
that should go in the header of the DataGrid's column in which the button appears;
specifies the textual display for each button. As with the
BoundColumn tag, the
ButtonColumn tag can have each button's text be the value of some column in the
DataSource - simply omit the
Text property in the
class and set the
DataTextField property to the name of the database column whose value you
wish to have displayed as the button's text.
Having Something Happen When the Button is Clicked
Now that we have a button in our DataGrid, we'd like to be able to associate some server-side code with the button so that, when it's clicked, some action can take place. Realize that whenever a
ButtonColumnbutton in the DataGrid is clicked, the
ItemCommandevent is fired; hence, we can write a server-side event-handler for this event. This event handler must have the following definition:
Once you define this function in your server-side script block (or code-behind page) you can tie the
actual DataGrid event to this event handler by adding the
OnItemCommand property in the
DataGrid's tag, like so:
The following code demonstrates how to have an event handler run when one of the buttons in the DataGrid is clicked:
There is one very important thing to notice here: we are only performing our database query and
databinding to the DataGrid on the first page visit. In our
Page_Load event handler,
which fires every time the page is loaded, we check to see if the page has been posted back. If it
has not, then we know this is the first visit to the page. In this case we want to populate
a DataReader with a database query, set the DataGrid's
DataSource property to this DataReader,
and call the DataGrid's
When the person clicks one of the "Details" buttons in the DataGrid, the ASP.NET Web page will perform
a postback, making a round trip back to the server. Again, the
Page_Load event handler will
fire, but this time, since we're doing a postback, the
BindData() Sub will not be
called. Furthermore, the
detailsClicked event handler will execute. Note that if
we blindly rebind the data to the DataGrid (that is we omit the
If Not Page.IsPostBack check)
detailsClicked event handler will not run, since rebinding of the DataGrid flushes out the
ItemCommand event. (Please reread the above two paragraphs - chances are at some point in
your experiences with the DataGrid you'll forget to do this and won't be able to get the DataGrid to fire
event handler code for its buttons. Trust me, it's happened to me a couple of times! :-).)
While this example and live demo illustrate how to have an
event handler associated with a button click from a
ButtonColumn tag, we've yet to see how
one can determine what row of the DataGrid had its button clicked. This very important
question will be examined in Part 2 of this article.