An Extensive Examination of the DataGrid Web Control: Part 3
By 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
Part 2.
This article will examine how to associate custom events with the DataGrid.
|
|
Introduction
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
BoundColumn tags
in the Columns tag of the DataGrid control. Recall that each BoundColumn tag
represents a column in the resulting DataGrid. To place a button in the DataGrid we can use the
ButtonColumn tag much in the same way as we used the BoundColumn tags.
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
bolded <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; Text
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
DataGrid's DataSource - simply omit the Text property in the ButtonColumn
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
ButtonColumn button in the DataGrid is clicked, the ItemCommand event is fired;
hence, we can write a server-side event-handler for this event. This event handler must have the
following definition:
Sub eventHandlerName(sender as Object, e as DataGridCommandEventArgs)
|
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:
<asp:datagrid runat="server"
|
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 DataBind() method.
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)
the 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.
