When you think ASP, think...
Recent Articles xml
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips
spgif spgif

Book Reviews
Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
Web Hosts
Author an Article
spgif spgif

ASP ASP.NET ASP FAQs Feedback topnav-right
Print this Page!
Published: Wednesday, April 24, 2002

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.

- continued -

  • Read Part 4
  • Read Part 5
  • Read Part 6
  • Read Part 7
  • Read Part 8
  • Read Part 9
  • Read Part 10
  • Read Part 11
  • Read Part 13
  • Read Part 14
  • Read Part 15
  • Read Part 16
  • Read Part 17
  • Read Part 18
  • ASP.NET Data Web Controls Kick Start

    ASP.NET Data Web Controls Kick Start

    ASP.NET Data Web Controls Kick Start is author Scott Mitchell's most recent book, which thoroughly examines three of the most commonly used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls can be difficult to master due to their numerous features and capabilities. With this book, you'll quickly become an expert, learning the gritty details and true capabilities of each. This 400+ page book explores the topics in this article series in much greater depth, along with examining various topics and techniques not covered here.

    Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET books.

    [Buy this Book]
    [Visit the Book's Companion Web Site]


    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:

    <form runat="server">
      <asp:DataGrid runat="server" id="dgPopularFAQs" 
                    BackColor="#eeeeee" Width="85%"
                    Font-Name="Verdana" CellPadding="4"
                    Font-Size="10pt" AutoGenerateColumns="False">
        <HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" 
                     HorizontalAlign="Center" />
        <AlternatingItemStyle BackColor="White" />
    	  <asp:ButtonColumn Text="Details" HeaderText="FAQ Details" />
    	  <asp:BoundColumn DataField="FAQID" Visible="False" />
          <asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
    [View a live demo!]

    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)
    End Sub

    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:

    <script language="vb" runat="server">
      Sub Page_Load(sender as Object, e as EventArgs)
        If Not Page.IsPostBack then
          BindData() 'Only bind the data on the first page load
        End If
      End Sub
      Sub BindData()
        'Make a connection to the database
        'Databind the DataReader results to the DataGrid.
      End Sub
      Sub detailsClicked(sender as Object, e As DataGridCommandEventArgs)
        Response.Write("You clicked one of the details buttons!")
      End Sub
    <form runat="server">
      <asp:DataGrid runat="server" ... >
    [View a live demo!]

    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.

  • Read Part 2!

  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article