This documentation is archived and is not being maintained.

Adding Button Columns to a DataGrid Web Server Control

Visual Studio .NET 2003

A ButtonColumn column in a DataGrid Web server control allows you to define custom functionality for items in the grid beyond the edit, delete, select, and hyperlink features of other column types. For example, you can use a ButtonColumn to create an "Add to shopping cart" button.

You can specify that the buttons in the ButtonColumn be either PushButton (pushbutton-style) or LinkButton (hyperlink-style) buttons. The button captions can either be static text or text read from a database.

When you define a button column, you specify a command associated with the button. When users click the button, the button's command is passed to the container — the DataGrid control — where you can handle it with your custom code.

To add a button column

  1. In Design view, select the DataGrid control, then click the Property Builder link at the bottom of the Properties window.
  2. In the DataGrid Properties dialog box, click the Columns tab.
  3. In the Available columns box, select Button Column and click the Add button ( Aa984252.vxadd(en-us,VS.71).gif ).
    Note   The Button Column node can be expanded to reveal the Select, Edit, and Delete button column types. For a custom button, however, you must select the Button Column node.
  4. Set the column's header text and footer text. If you want to use an image rather than text for the header, select the image in the Header image box. By default, the DataGrid displays the name of the field in the data source as the header text.
    Note   The header and footer will be displayed only if you have selected Show header and Show footer in the General tab.
  5. If you want to be able to sort by the contents of the column, set the Sort expression for the column. For details, see Adding Sorting to a DataGrid Web Server Control.
  6. If you are creating a button with static text, set the button's caption in the Text box. If you are displaying the contents of a database field as the caption of the button, select the field from the Text field list. If you are setting the button text using a text field, you can specify a formatting expression for the text using the Text format string box. For information about creating a formatting expression, see Composite Formatting.
  7. Select whether the button is a link button (hyperlink-style) or push button from the Button type list.
  8. In the Command name box, enter the command that should be sent to the DataGrid control when the button is clicked. For details about working with the command text, see the section below, "To respond to button events."

Defining the button column is one part of creating custom buttons in the grid. You must also create an event handler to respond when a user clicks a button.

To respond to button events

  1. Create an event handler for the DataGrid control's ItemCommand event. This event is raised when the user clicks any button in any button column in the grid. For details, see Creating Event Handlers in Web Forms Pages.
  2. In the method, you determine which button was clicked by examining the information passed in the DataGridCommandEventArgs argument of the event.
    1. Check the CommandName property of the event-argument object (e.CommandName) to see what command string was passed.
    2. Use the Item property of the argument object to get a reference to the DataGridItem Class instance associated with the row where the user clicked. The Item property in turn contains a Cells collection (e.Item.Cells) containing the contents of the current row. Each cell has a Text property containing the contents of the cell.

The following example shows how you can test to see whether the command string "AddToCart" was passed to the event handler. If so, the example extracts the value of a column (2) containing a product ID, which is used to add items to the shopping cart.

' Visual Basic
Private Sub DataGrid1_ItemCommand(ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) _
Handles DataGrid1.ItemCommand
   'e.Item is the row of the table where the button was 
   ' clicked.
   Dim productID As String
   productID = e.Item.Cells(2).Text
   If (e.CommandName = "AddToCart") Then
      ' Add code here to add the productID item to the cart.
   End If
   DataGrid1.DataBind()
End Sub

// C#
private void DataGrid1_ItemCommand(object source, 
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
   // e.Item is the row of the table where the button was 
   // clicked.
   string productID = e.Item.Cells[2].Text;
   
   if (e.CommandName == "AddToCart")
   {
      // Add code here to add the productID item to the cart.
   }
   DataGrid1.DataBind();
}

See Also

DataGrid Columns | Adding DataGrid Web Server Controls to a Web Forms Page | DataGrid Web Server Control | Introduction to the DataGrid Web Server Control

Show: